JS事件总结

最新推荐文章于 2024-06-10 17:00:16 发布

aclg25510

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/sstone/p/8487626.html

版权

一、HTML事件处理程序

　　1.DOM0级事件处理程序

<html>

<body>
    <form method="post">
        <input type="text" name="username" />
        <input id="myBtn" type="button" value="点我" />
    </form>
</body>

</html>
<script>
    var btn = document.getElementById("myBtn");
    btn.onclick = function () {
        console.log(this);
        console.log(this.value);
        alert(this.form.username.value);
    } 
</script>

　　　　实际上可以在事件处理程序中通过this访问元素的任何属性和方法。

　　　　也可以删除通过DOM0级方法指定的事件处理程序

　　　　btn.onclick = null; // 删除事件处理程序

　　　　DOM0级只支持一个回调函数

　　2.DOM2级事件处理程序

　　　　DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含

　　　　这两个方法，并且它们都接受3个参数：要处理的事件名、事件处理函数和一个布尔值。布尔值为true表示在捕获阶段调用事件处理程序，反之在

　　　　冒泡阶段调用事件处理程序。

<html>

<body>
    <form method="post">
        <!-- <input type="text" name="username" /> -->
        <input id="myBtn" type="button" value="点我" />
    </form>
</body>

</html>
<script>
    var btn = document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        alert(this.id);
    });
    btn.addEventListener("click",function(){
        alert("Hello World");    
    });
</script>

　　　　使用DOM2级处理方法添加事件的主要好处是可以添加多个事件处理程序，如上所示。

　　　　这两个事件处理程序会按照添加他们的顺序触发，因此先显示元素id，然后显示 Hello Wolrd。

　　　　通过addEventListener()添加的事件只能通过removeEventListener()来移除，移除时添加的参数与添加处理程序时使用的参数相同。

　　　　这也意味着通过addEventListener()添加的匿名函数将无法移除。

   var btn = document.getElementById("myBtn");
    var handler = function(){
        alert(this.id);
    }
    btn.addEventListener("click",handler,false);
    btn.removeEventListener("click",handler,false);
    btn.addEventListener("click",function(){
        alert("Hello World");    
    });
只会弹出Hello World

　　　　IE实现了DOM中类似的两个方法:attachEvent()和detachEvent()。都会被添加到冒泡阶段

　　3.跨浏览器事件处理

    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler); // IE的事件处理,为了兼容IE8之前的浏览器，事件加上on前缀
            } else {
                element["on" + type] = handler; // 都无效则采用DOM0级的事件处理
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler); // IE的事件处理
            } else {
                element["on" + type] = null; // 都无效则采用DOM0级的事件处理
            }
        }
    }

　　　　EventUtil增强：

    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler); // IE的事件处理,为了兼容IE8之前的浏览器，事件加上on前缀
            } else {
                element["on" + type] = handler; // 都无效则采用DOM0级的事件处理
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler); // IE的事件处理
            } else {
                element["on" + type] = null; // 都无效则采用DOM0级的事件处理
            }
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
        getEvent: function (event) {        // 兼容IE，在IE中没有event对象，只有通过window.event
            return event || window.event; 
        },
        preventDefault:function(event){    // 取消事件的默认行为，比如a连接点击的默认行为是跳转，取消后不会再跳转
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        stopPropagation:function(event){  // 组织事件的冒泡传播，非IE浏览器还会阻止事件捕获
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    }

　　4.焦点事件

　　　　　　焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，

　　　　可以知晓用户在页面上的行踪。

- - blur:在元素失去焦点时触发，这个事件不会冒泡；所有浏览器都支持它。
  - focus:在元素获得焦点时触发，这个事件不会冒泡；所有浏览器都支持它。
  - focusin:在元素获得焦点时触发，这个事件与focus事件等价，但是它冒泡。
  - focusout:在元素失去焦点时触发，这个事件与blur事件等价，但是它冒泡。

　　　　docuement.documentElement （标准模式） document.body（混杂模式）

　　5.键盘与文本事件

　　　　　　keydown:当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件。

　　　　　　keypress:当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件。按下ESC键也会触发该事件。

　　　　　　keyup:当用户释放键盘上的键时触发。

　　6.事件委托优化

　　　　　通过把事件处理程序指定给较高层次的元素，同样能够处理该区域中的事件

    var body = document.body;
    EventUtil.addHandler(body, "click", function () {
        let target = event.target || event.srcElement;
        switch (target.id) {
            case 'myBtn1':
                body.style.backgroundColor = "red";
                break;
            case 'myBtn2':
                body.style.cssText = "background-color:green";
                break;
        }
    })

转载于:https://www.cnblogs.com/sstone/p/8487626.html

aclg25510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件总结

一、HTML事件处理程序　　1.DOM0级事件处理程序　　　　<html><body> <form method="post"> <input type="text" name="username" /> <input id="myBtn" type="button...
复制链接

扫一扫