添加事柄总结

原创 1948712434 随笔 CSS 184阅读 2018-01-28 17:03:47 举报

首先了解什么是事柄,事柄就是相当于添加一个事件,通俗一点例如:一个链接,当鼠标移动到链接上时,链接字体会变大(当鼠标移动到链接上时,链接字体会变大:这个动作就是一个事柄),如果在添加一个事柄(当鼠标移动到连接上时,链接上的字体会变红色),添加完事柄以后,当鼠标移动到连接上时,字体会变大而且会变红色。

添加事柄的方法:(如今添加事柄一般不会再HTML标签上面添加)

<body>
<p>我喜欢JavaScript</p>
<p>好巧我也喜欢啊</p>

    <script>
        //第一种
        var p = document.getElementsByTagName("p"); //获取所有的p标签;
        p[0].addEventListener("click",myfunction); //第一个p标签添加事柄,注意用的是“click”并不是“onclick”;
        function myfunction(){
            p[0].style.color = "red";              //第一个p字体变红色;
            p[1].style.color = "blue";             //第二个p字体变蓝色;
        }

        //第二种
        var p = document.getElementsByTagName("p");
        p[0].addEventListener("click",function(){
            p[0].style.color = "red"; 
            p[1].style.color = "blue";
        })

        //第三种
        var p = document.getElementsByTagName("p");
        p[0].addEventListener("mousemove",function(){
            p[0].style.color = "yellow";
            p[1].style.color = "darkgreen";
        },true)          //true是表示捕获时激活事件;默认是false表示冒泡是激活事件。
    </script>
</body>

下面就是移除事柄了(remove):

<body>
<p>我喜欢JavaScript</p>
<p>好巧我也喜欢啊</p>
<button type="button">点击我</button>
<script>

        var p = document.getElementsByTagName("p");//获取所有的p标签;
        p[0].addEventListener("mouseover",myfunction);

        p[0].addEventListener("mouseout",function(){  //鼠标离开p时字体变黄色;
            p[0].style.color = "yellow";
            p[1].style.color = "yellow";
        });

        //移除事柄
        var btn = document.getElementsByTagName("button");//获取所有button标签;
        btn[0].addEventListener("click",function(){
            p[0].removeEventListener("mouseover",myfunction)
            })
        function myfunction(){
            p[0].style.color = "red";
            p[1].style.color = "red";
        }
    </script>
</body>
评论 ( 1 )
最新评论
1948712434 2018-03-26 15:35:48 1F

使用removeEventListener()方法移除addEventListener()方法添加得事件时,那么adEventListener()使用的函数不能是匿名函数,要使用声明函数或者命名函数表达式了;同样对于IE浏览器使用的attchEvent()和deatchEvent()同理;不过attchEvent()添加事件的this将是指向window的,例:

因为在使用 attachEvent() 方法的情况下,事件处理程序会在全局作用域中运行,因此 this 等于 window 。