js事件-笔记

js事件

---

常见事件

• onload 加载完成事件 页面加载之后，常用于页面js代码初始化动作
• onclick 单击事件 常用于按钮的点击响应操作
• onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
• onchange 内容发生改变事件 常用于下拉列表和输入框发生改变后操作
• insubmit 表单提交事件 常用于表单提交前，验证所有表单项目是否合法

事件的注册方式

1. 静态注册事件

通过html标签的事件属性直接赋予事件响应的代码

• 最多只能绑定一个事件
• 一眼就能看出什么元素绑定了事件。
• html和js文件的耦合度过高，不利于维护，修改脚本的时候还得修改html文件。标签绑定不符合行为和事件分离原则，js文件和html文件应该尽量松散耦合。
• 可能有时间差。如果js代码在html标签之后，用户激活事件时，事件如果还没有被解析，则会引起报错。（一般用try,catch解决，这样错误便不会付出水面。）。

2.动态注册事件

先通过js代码得到标签的dom对象，然后通过 dom 对象.事件名 = function(){} 或者 document.addEventListener(“事件名称”, 函数, false)
这种形式赋予事件响应后的代码。

缺点：

    <script language="JavaScript">
      function f() {
            alert("static");
            //dynamic 
            document.getElementById("e").onclick = function (ev) {

                alert("dynamic")
            };
        }
    </script>



<button onclick="f()">static bind</button>
<button id="e">dynamic bind</button>

事件处理分级

js中事件绑定的几种方式
JS事件级别

1.DOM0级事件处理程序：

将一个函数赋值给一个事件处理程序属性，表示元素的方法，这时的事件处理程序是在元素的作用域中运行。这种做法的优点是：简单和所有浏览器都支持。
例如：

//1
var o= document.getElementById("ud");
o.onclick = function() {}
//2
<button type="button" onclick="show()"></button>

缺点是：只能给该元素绑定一个事件。于是出现DOM2级事件处理程序。

2. DOM2级事件处理程序：

addEventListener()添加事件，removeEventListener()删除事件。可添加多个，执行顺序与添加顺序相同。两个方法都接受三个参数：

第一个参数：事件名称

第一个参数：作为事件处理程序的函数（没有on前缀）

第一个参数：表示是否在捕获阶段执行事件处理函数

例如：

    <script language="JavaScript">


        function f() {
            alert("static");
            //dynamic
            document.getElementById("e").onclick = function (ev) {

                alert("dynamic")
            };
        }

        function f2() {

           document.getElementById("e").addEventListener("click",bl,false);
           document.getElementById("e").addEventListener("click",bl2, false);

        }

        function bl() {
            alert("blur1");
        }
        function bl2() {
            alert("bl2");
        }
    </script>
    <button onclick="f()">static bind</button>
	<button id="e">dynamic bind</button>
	<button id="d"  style="" onclick="f2()">Ak</button>

以下暂时参考原文：

1. js中事件绑定的几种方式
2. JS事件级别

关于第三个参数一般填写默认值false或不填，因为：大多数情况下，都是将事件处理程序添加到时间流的冒泡阶段，这样可以最大限度地兼容各种浏览器，如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。关于捕获和冒泡同时存在的情况下我总结了以下几点：

（1）冒泡且捕获：捕获导致不能进入更低层事件，点击该层的更低层只能触发该捕获层，一般为了不阻断其他事件的触发设置捕获为false。

（2）冒泡但不捕获：执行冒泡顺序，从触发层从内到外执行事件，与事件监听绑定的顺序无关。

（3）若多级包含元素且多个元素都添加事件监听则为了更稳定的执行时间需要：①每个元素的事件监听的捕获都设置为false或不填。②并且在执行函数内阻止冒泡。e.stopPropagation()||e.cancelBubble=true;

3. DOM3级事件

DOM3 级事件在 DOM2 级事件的基础上添加了更多的事件类型，全部类型如下：

UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：click、dbclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keyup、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

事件流三个阶段

参考

---

更新中…