首页 / JAVASCRIPT / Javascript知识——事件

Javascript知识——事件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript知识——事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4422字，纯文字阅读大概需要7分钟。

内容图文

O(∩_∩)O~~又是新的一周开始了，今天还是在继续学习Javascript知识，今天主要讲了事件的知识。现在就总结下吧。

事件

事件一般是用于浏览器和用户操作进行交互。最早是 IE 和 Netscape Navigator 中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而 DOM2 级规范开始尝试以一种复合逻辑的方式标准化 DOM 事件。IE9、Firefox、Opera、Safari 和 Chrome 全都已经实现了“DOM2 级事件”模块的核心部分。IE8 之前浏览器仍然使用其专有事件模型。

JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型.

内联模型：传统接单的一种处理事件的方法，和 HTML 混写的，并没有与 HTML 分离。

在 HTML 中把事件处理函数作为属性执行 JS 函数

<input type="button" value="按钮" onclick="box();" /> //执行 JS 的函数

//函数不得放到 window.onload 里面，这样就看不见了

脚本模型:由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。

<script>
    window.onload = function () 
    {
        var input = document.getElementsByTagName(‘input‘)[0]; //得到input对象
        input.onclick = function () {          //匿名函数执行
            alert(‘Lee‘);
        };
     };   
    </script>

注：通过匿名函数，可以直接触发对应的代码。也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟着括号) input.onclick = box; //把函数名赋值给事件处理函数

事件处理函数： JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML 事件。

技术分享

注：所有的事件处理函数都会都有两个部分组成， on + 事件名称，例如click的事件处理函数是onclick

鼠标事件：页面所有元素都可触发

onclick

 <script>
        
        window.onload = function () {
           //鼠标单击事件（第一种写法）
                document.getElementsByName("name")[0].onclick = function () {

                    alert(this.value);

//鼠标单击事件（第二种写法，可以把方法单独拿出来写，最后赋值）
function click() {

                        alert(this.value);
                    }

                    document.getElementsByName("name")[1].onclick = click;
                }
            };
         

        };
    </script>

<body>

    <form>

        <input  type="button" name="name" value="点击"/><br /><br />

       <input type="button" name="name" value="点击函数执行" /><br /><br />
       
    </form>

</body>

ondblclick双击事件

input.ondblclick = function () {
alert(this.value);
};

mousedown：当用户按下了鼠标还未弹起时触发

input.onmousedown = function () {
alert(this.value);
};

mouseup：当用户释放鼠标按钮时触发

input.onmouseup = function () {
alert(this.value);
};

mouseover：当鼠标移到某个元素上方时触发

input.onmouseover = function () {
alert(this.value);
};

mouseout：当鼠标移出某个元素上方时触发

input.onmouseout = function () {
alert(this.value);
};

mousemove：当鼠标指针在元素上移动时触发

input.onmousemove = function () {
alert(this.value);
};

键盘事件：

keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

keyup：当用户释放键盘上的键触发

HTML事件：

load：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发

window.onload = function () {
alert(‘Hello World’);
};

unload：当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架集上触发

window.onunload = function () {
alert(‘Hello World‘);
};

select：当用户选择文本框(input 或 textarea)中的一个或多个字符触发

input.onselect = function () {
alert(‘Hello World‘);
};

change：当文本框(input 或 textarea)内容改变且失去焦点后触发

input.onchange = function () {

alert(‘Hello World‘);

};

focus：当页面或者元素获得焦点时在 window 及相关元素上面触发

input.onfocus = function () {

alert(‘Hello World‘);

};

blur：当页面或元素失去焦点时在 window 及相关元素上触发

input.onblur = function () {

alert(‘Hello World‘);

};

submit：当用户点击提交按钮在<form>元素上触发

form.onsubmit = function () {

alert(‘Hello World‘);

}

reset：当用户点击重置按钮在<form>元素上触发

form.onreset= function () {

alert(‘Hello World‘);

}

事件对象：事件处理函数的一个标准特性是，以某些方式访问的事件对象包含有关于当前事件的上下文信息。
事件处理三部分组成：对象.事件处理函数=函数

例：单击文档任意处

 <script>
         document.onclick = function () {
            alert(‘Lee‘);
        };
    </script>

注：以上程序的名词解释：click 表示一个事件类型，单击。onclick 表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。document 表示一个绑定的对象，用于触发某个元素区域。function()匿名函数是被执行的函数，用于触发后执行。

除了用匿名函数的方法作为被执行的函数，也可以设置成独立的函数

document.onclick = SayHi; //直接赋值函数名即可，无须括号function SayHi() {

alert(‘Hello World‘);

}

事件对象，我们一般称作为 event 对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。

            function SayHi() {               //普通空参函数
alert(arguments.length);     //没有得到任何传递的参数
}

input.onclick = function () { //事件绑定的执行函数
alert(arguments.length);    //  得到一个隐藏参数
};

通过上面两组函数中，我们发现，通过事件绑定的执行函数是可以得到一个隐藏参数的。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。

上面这种做法比较累，那么比较简单的做法是，直接通过接收参数来得到即可。

input.onclick = function (evt) { //接受 event 对象，名称不一定非要 eventvar e = evt || window.event;  //实现跨浏览器兼容获取 event 对象
alert(e); //MouseEvent，鼠标事件对象
};

事件流
事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。

事件冒泡，是从里往外逐个触发。（默认）

事件捕获，是从外往里逐个触发。

document.onclick = function () {

alert(‘我是 document‘);

};

document.documentElement.onclick = function () {

alert(‘我是 html‘);

};

document.body.onclick = function () {

alert(‘我是 body‘);

};

document.getElementById(‘box‘).onclick = function () {

alert(‘我是 div‘);

};

document.getElementsByTagName(‘input‘)[0].onclick = function () {
alert(‘我是 input‘);
};

上面这个例子，是这样执行的：

技术分享

阻止事件冒泡：

            function
             stopPro(evt) {


            var e = evt || window.event;

window.event ? e.cancelBubble = true : e.stopPropagation();

}

好了，今天就先写到这里了。。。。O(∩_∩)O~~~

原文：http://www.cnblogs.com/ysaw/p/4219943.html

内容总结

以上是互联网集市为您收集整理的Javascript知识——事件全部内容，希望文章能够帮你解决Javascript知识——事件所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1162195.html

来源：【匿名】

【上一篇】javascript学习日记1 【下一篇】javascript 怎么调用php方法

更多 ►

【Javascript知识——事件】教程文章相关的互联网学习教程文章

jQuery $(document).ready()和JavaScript onload事件【代码】【图】

jQuery $(document).ready()和JavaScript onload事件 jQuery $(document).ready()和window.onload　　根据ready()方法的API说明http://api.jquery.com/ready/　　这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.　　即当DOM加载完毕的时候,执行这个指定的方法.　　因为只有document的状态ready之后,对page的操作才是安全的.$(document).ready()仅在...

JavaScript事件【代码】

目录一、DOM0级事件处理二、事件冒泡与事件捕获三、DOM2级事件处理四、IE事件处理程序及跨浏览器支持五、事件对象一、DOM0级事件处理事件，由WEB页面中发生的一些特定行为触发。比如在某个页面元素上按下鼠标左键，按下键盘某个按键，某对象获得或丢失焦点时均会触发对应的事件。JavaScript和HTML的交互就是通过事件来实现的。我们使用事件侦听器对事件进行“注册”，事件发生时便执行相应的代码。DOM0级事件处理程序以其简单、跨浏...

javascript和jquey的自定义事件小结【代码】【图】

“通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好对象之间通过直接方法调用来交互1）对象A直接调用对象B的某个方法，实现交互；直接方法调用本质上也是属于一种特殊的发送与接受消息，它把发送消息和接收消息合并为一个动作完成；方法调用方和被调用方被紧密耦合在一起；因为发送消息和接收消息是在一个动作内完成，所以无...

Javascript中点击（click）事件的3种写法【代码】

方法一<!DOCTYPE html> <html> <head><title>Javascript中点击事件方法一</title> </head> <body><button id="btn">click</button><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick=function(){alert("hello world");}</script> </body> </html> 方法二<!DOCTYPE html> <html> <head><title>Javascript中点击事件方法二</title> </head> <body><button id="btn">click</button><script type=...

javascript事件对象

把多个JavaScript函数绑定到onload事件处理函数上

为了让函数只在页面加载完毕后才得到执行，我们会把函数绑定到onload事件上：window.onload = userFunction但如果有两个函数：firstFunction() 和 secondFunction()，都想让它们在页面加载完毕后得到执行，该怎么办？如果这样： window.onload = firstFunciton; window.onload = secondFunction;只有最后一个函数能被执行。由此可得：每个事件处理函数只能绑定一条指令。但我们可以这样做： window.onload = function...

Javascript事件【代码】

Javascript包含三种模型：内联模型、脚本模型和DOM2模型。1.内联模型（现在基本不用了）　　即事件响应处理函数作为一个标签属性来执行，典型的就是onclick()函数；<input type=‘button‘ value=‘按钮‘ onclick="alert(‘点击了！‘)" /> 2.脚本模型　　为了解决html与javascript的分离。window.onload=function(){var input=document.getElementByTagName(‘input‘)[0];input.onclick=function(){alert("点击了！");} }PS：也...

javascript监听事件兼容【代码】

JavaScript 同步异步及事件轮询详解【代码】

JS为何是单线程的？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。（在JAVA和c#中的异步均是通过多线程实现的，没有循环队列一说，直接在子线程中完成相关的操作）JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假...

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。1. <!DOCTYPE HTML>2. <html>3. <head>4. <meta charset="utf-8" />5. <title>闭包演示</title>6. <style type="text/css"...

javascript---事件对象【代码】

事件对象event　　如果是事件处理函数绑定的函数，浏览器会默认传递一个参数，event对象。而这个对象会根据触发的事件判断是鼠标事件还是键盘事件 //鼠标事件1 document.onclick=function(evt){ 2 alert(evt); //键盘事件3 }//键盘事件1 document.onkeydown=function(evt){ 2 alert(evt); //键盘事件3 } 由于IE浏览器和W3C浏览器获取event对象有不兼容的地方，所以...

JavaScript进阶系列06,事件委托【代码】

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制。现在需要使用这个事件处理机制为页面元素注册事件方法。 □ 点击页面任何部分触发事件创建一个script1.js文件。(function() {eventUtility.addEvent(document, "click", function(evt) {alert(‘hello‘);}); }()); 页面部分。<head> <meta http-equiv="Content-Type" content="text/html; ...

Javascript----input事件实现动态监听textarea内容变化【代码】【图】

1、代码<!DOCTYPE html> <html><head><title>textarea输入文字监听</title> </head><body><textarea id=‘text‘ maxlength="50" style="width: 400px; height: 200px;"></textarea><span id=‘sp‘></span><script type="text/javascript">var val = document.getElementById("text");var tar = document.getElementById(‘sp‘);console.log(tar);val.addEventListener("input", function(e) {var t = this.value;console.log(t)...

javascript 事件绑定【代码】【图】

一、最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。这些属性也被称为事件处理器<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">或者<INPUT TYPE="text" NAME="first_name" onChange="javascript : js code">或者Dom.onclick = function(e){ //todo }二、js方法绑定事件1、dom对象的attachEvent()方法给该dom元素的事件（该方法仅支...

Javascript高级编程学习笔记（60）—— 事件（4）事件类型

事件类型Web浏览器中可能发生的事件有许多种类型不同类型的事件都有着自己独特的信息在“DOM3级事件”规范中，规定了以下几类事件：UI事件当用户与页面元素交互时触发焦点事件当元素失去或获得焦点时触发鼠标事件当用户通过鼠标在页面上执行操作时触发滚轮事件当使用鼠标滚轮或类似设备时触发文本事件当在文档中输入文本时触发键盘事件当用户通过键盘在页面执行操作时触发合成事件当为IME（输入法编辑...

首页 / JAVASCRIPT / Javascript知识——事件

Javascript知识——事件

内容导读

内容图文

内容总结

内容备注

内容手机端

【Javascript知识——事件】教程文章相关的互联网学习教程文章

事件 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程