JS-事件

最新推荐文章于 2024-04-12 17:27:57 发布

VIP文章 weixin_51077152

最新推荐文章于 2024-04-12 17:27:57 发布

阅读量288

点赞数

分类专栏： web前端文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_51077152/article/details/120366150

版权

2.1 什么是事件

所谓事件就是网页浏览者或浏览器自身的某些行为，如点击鼠标、敲击键盘、刷新页面等

2.2 JavaScript处理事件的三种方式

1. HTML事件处理程序

a.添加格式：<开始标签 on事件名称="事件处理函数名称()"></结束标签>
b.删除格式：元素节点.removeAttribute('on事件名称');
c.this的使用：如果在事件处理函数的小括号中使用this，那么这个this代表的是当前事件应用的那个元素
注意：如果是HTML事件处理程序，那么当事件名称相同时，会执行第一个事件，后面的会被屏蔽掉
d. 特殊格式：<div onclick="f1(); f2()">1</div>一个事件，实则两个函数一起被触发

   <style>
        div{
   
            width: 200px;
            height: 200px;
            font-size: 80px;
            background-color: burlywood;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <!-- HTML事件处理程序-->
    <!-- 1. 添加事件-->
    <div onclick="console.log('helloworld')">hello</div>
    <div onclick="f1()">ok</div>
    <!-- 2. 删除事件-->
    
    <!-- 3. this的使用-->
    <h1 onclick="f2(this)">我是一号标题</h1>
    <h2 onclick="f2(this)">我是二号标题</h2>
    <!-- 注意-->
    <div onclick="f1();f3()"></div>             //ok跟yes一起输出到控制台
    <div onclick="f1()" onclick="f3()"></div>   //只输出ok
<script>
//		添加事件
    function f1(){
   
        console.log("ok");
    }
//    删除事件
    var div=document.getElementsByTagName("div")[0];       //得到第一个div
    console.log(div);
    div.removeAttribute("onclick");
//    this的使用
    function f2(ele){
   
        console.log(ele.innerHTML);
    }
//    注意
    function f3(){
   
        console.log("yes");
    }
</script>

2. DOM0级事件处理程序

a. 添加方式
添加方式1：元素节点.on事件名称 = function() {};
添加方式2：元素节点.on事件名称 = 事件处理函数名称(注意函数名后不加括号);
b.删除方式：元素节点.on事件名称 = null;
c.DOM0级事件处理程序中this的使用：在其对应的事件处理函数中直接使用this即可，这个this代表的就是当前事件应用到的元素
注意：如果一个元素被添加了多个相同的事件，那么后添加的事件会覆盖掉前面的事件

    <!-- DOM0级事件处理程序-->
    <div id="box1"></div>
    <!-- 删除事件-->
    <button>删除事件</button>
    <!-- this的使用-->
    <ul>
        <li>我是第1个Li</li>
        <li>我是第2个Li</li>
        <li>我是第3个Li</li>
        <li>我是第4个Li</li>
        <li>我是第5个Li</li>
    </ul>
<script>
/*添加事件*/
    var box1=document.getElementById("box1");
//  方式1
    box1.onclick=function(){
   
        console.log("方式1");
    };
//  方式2
    function fn(){
   
        console.log("方式2");
    }
    box1.onclick=fn;		//不加括号，加了括号赋值为函数的返回值，点击事件失效
/*删除事件*/
    var btn=document.getElementsByTagName("button")[0];
    btn.onclick=function(){
   
        box1.onclick=null;
    }
//    this的使用
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
   
        lis[i].onclick=function(){
   
            console.log(this.innerHTML);
        }
    }
</script>