事件处理优化

Posted 兔子只吃胡萝卜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件处理优化相关的知识，希望对你有一定的参考价值。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<ul id="ul">
    <li id="li1">qwe</li>
    <li id="li2">qwe</li>
    <li id="li3">qwe</li>
</ul>
</body>
<script type="text/javascript">
/*
    目标：
    点击每个li可以有三种不同的效果
*/
//优化前的代码
/*
    利用的就是传统的方式，在每一个需要处理的li上面添加上一个click
*/
    var li1 = document.getElementById(‘li1‘);
    li1.addEventListener("click",function(){
        li1.innerHTML = "兔子只吃胡萝卜";
    },false);
    var li2 = document.getElementById(‘li2‘);
    li2.addEventListener("click",function(){
        alert("by交易");
    },false);
    var li3 = document.getElementById(‘li3‘);
    li3.addEventListener("click",function(){
        location.href = "www.baidu.com";
    },false);

//优化后的代码
/*
    利用的就是事件的冒泡原理，在li的统一的父元素上添加一个click事件
    通过click事件的向上传递性，来获取对应的值
*/
    var ul = document.getElementById(‘ul‘);
    ul.addEventListener("click",function(event){
        switch(event.target.id){
            case "li1":
                event.target.innerHTML = "兔子只吃胡萝卜";
                break;
            case "li2":
                alert("by交易");
                break;
            case "li3":
                location.href = "www.baidu.com";
                break;
        }
    },false);
</script>
</html>

 

以上是关于事件处理优化的主要内容，如果未能解决你的问题，请参考以下文章

脚本 php artisan 优化处理使用 laravel 5.4 返回的 post-update-cmd 事件，错误代码为 1

Android YouTube Player API Fragment无法手动处理触摸事件

优化 C# 代码片段、ObservableCollection 和 AddRange

如何处理片段上的触摸事件？

使用 C++ 反转句子中的每个单词需要对我的代码片段进行代码优化

处理Fragment类ListView的按钮事件？