JavaScript-事件处理（事件绑定、监听器、返回值、事件对象）

最新推荐文章于 2023-03-30 12:00:00 发布

sreindo

最新推荐文章于 2023-03-30 12:00:00 发布

阅读量3.5k

点赞数 1

文章标签： javascript js html

本文链接：https://blog.csdn.net/weixin_44233876/article/details/106176934

版权

一、传统的事件绑定

两种方法一定要掌握

第一种，在html代码中嵌入行内的事件句柄

<body>
    <p onclick="f()">我是文字</p>
</body>

function f(){
            alert("你好");
        }

第二种，函数对象赋值给时间句柄

//为了在页面渲染完成后再加载下列代码，将其放在函数init中 ,并给init函数设置为onload

<body onload="init()">
    <!-- 传统事件绑定第二种 -->
    <p id="p1">我是文字</p>
</body>
function init(){
            var vp1=document.getElementById("p1");
            vp1.onclick=function(){ //匿名函数√
                console.log("hello.")
            }
    //vp1.onclick = f; //函数对象√
    //vp1.onclick = f(); //函数调用× 由于return undifined，因此也就不会触发时间
        }

传统事件绑定的优缺点

优点：可以用this

缺点：无法给一个对象多次注册相同的事件

//使用this
//此时的this是一个html元素，具有innerText属性
        function fun(){
   
            console.log(this.innerText); //输出 “我是文字”
        }
        function init(){
   
            var vp1=document.getElementById("p1");
            vp1.onclick=fun; //注意是函数对象
        }

<!--使用this
此时的this是一个window对象，它没有innerText属性
"在处理函数块内直接用this引用的是当前元素"-->
<p onclick="console.log(this)">西北农林科技大学</p>

其他

obj.innerText 调用html元素的文本内容

//--------------------------------------------------------------------------

二、事件监听器

不同事件句柄，只能绑定一次，只能插接一个事件处理函数

对于事件监听器，一次可以插接多个

IE8标准

DOM标准下的事件监听器

支持W3C标准事件监听器（IE9 Chrome FireFox…)

addEventListener设置监听器

addEventListener(type, handler, boolean)

接收三个参数：

第一个参数：事件类型名(click, )
第二个参数：回调处理函数（监听器函数）
第三个参数：注明该处理函数是在事件传递过程中的捕获阶段（true）被调用

还是在冒泡阶段（false）被调用

removeEventListener取消监听器

跨浏览器注册与移除元素事件监听器方案

var EventUtil = {
   
	//注册  		 在什么元素上 注册什么类型的 事件句柄
	addHandler: function (element, type, handler){
   
        //W3C
        if(element.addEventListener){
   
            element.addEventListener(type, handler, false);
        }
        //IE8
        else if(element.attachEvent){
   
            element.attachEvent

最低0.47元/天解锁文章

sreindo

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-事件处理（事件绑定、监听器、返回值、事件对象）

一、传统的事件绑定两种方法一定要掌握第一种，在html代码中嵌入行内的事件句柄<body> <p onclick="f()">我是文字</p></body>function f(){ alert("你好"); }第二种，函数对象赋值给时间句柄//为了在页面渲染完成后再加载下列代码，将其放在函数init中 ,并给init函数设置为onload<body onload="init()"&gt
复制链接

扫一扫