JavaScript--事件高级

最新推荐文章于 2022-03-24 00:21:04 发布
最新推荐文章于 2022-03-24 00:21:04 发布
阅读量135 收藏
点赞数
分类专栏： web前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luan7liem/article/details/85218368
版权

一.事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定方式</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
        }

    </style>
</head>
<body>
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<button class="begin">开始</button>
<button class="event_1">事件绑定1</button>
<button class="event_2">事件绑定2</button>
<!--点击开始，重新获得点击事件(所有状态重置)-->


<script>
    // 每一个box点击都会toggle颜色, 当颜色都变成黑色, 取消所有点击事件,
    // 点击开始, 重新获得点击事件(所有状态应该重置)

    var beginBtn=document.querySelector(".begin");
    var boxs=document.querySelectorAll(".box");

    //给开始按钮绑定一个重置事件
    beginBtn.onclick=init;
    //定义一个计数器,记录变黑的个数
    var count=0;


     //点击box切换颜色
    function toggleColor(){
           // console.log(this)
        if (this.style.backgroundColor=="yellow"){
            this.style.backgroundColor="black"
            count+=1;
        }
        else{
             this.style.backgroundColor="yellow"
             count-=1;
        }
        //检测是否需要结束
        count==3&&overAction();

    }

    //结束功能，取消点击事件
    function overAction(){
        for (var i = 0; i < boxs.length; i++){
             boxs[i].onclick=null;
        }

    }

    //重置功能
    function init() {
        for (var i = 0; i < boxs.length; i++) {
            boxs[i].style.backgroundColor = "yellow";  //将所有box背景重置为yellow
            boxs[i].onclick=toggleColor;  //绑定点击事件
        }

        //计数器重置
        count=0;
    }

    //启动服务
    init();

</script>

  二.事件的绑定方式

       1.事件绑定的第一种方式:on事件绑定      

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定方式</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
        }

    </style>
</head>
<body>
<button class="event_1">事件绑定1</button>
<button class="event_2">事件绑定2</button>
<script>
     //事件绑定的第一种方式:on事件绑定
    var event_on_1=document.querySelector(".event_1");
    event_on_1.onclick=function(){
        console.log("事件绑定方式1")
    }
</script>
</body>
</html>

    2.事件绑定的第二种方式：非on事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定方式</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
        }

    </style>
</head>
<body>
<button class="event_1">事件绑定1</button>
<button class="event_2">事件绑定2</button>
<script>
     var event_on_2=document.querySelector(".event_2");
     event_on_2.addEventListener("click",function(){
        console.log("事件绑定方式2-a")
    })  //“click”：为事件名

    event_on_2.addEventListener("click",function(){
        console.log("事件绑定方式2-b")
    })

     var action=function(){
        console.log("事件绑定方式2-b")
    }

     event_on_2.addEventListener("click",action)

    //取消绑定事件
    event_on_2.removeEventListener("click",action);

</script>
</body>
</html>

     总结:1.第一种只能绑定一个实现体, 如果有多次绑定, 保留最后一次

             2.box.onclick = null来取消事件的绑定

             3.第二种能绑定多个实现体, 如果有多次绑定, 按顺序依次执行

             4.var fn = function() {} ;box.addEventListener('click', fn)

             5.box.removerEventListener('click', fn)来取消事件的绑定

             6.了解: 第三个参数决定冒泡顺序(子父级谁先相应事件)

 三.  事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .box{
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .sup{
            width: 200px;
            height: 200px;
            background-color: #0f8209;
        }
        .sub{
            width: 100px;
            height:100px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="box">hahahah</div>
    <div class="sup">
        <div class="sub"></div>
    </div>
    <a href="http://www.baidu.com" class="aBtn">只响应自身点击事件</a>

<script>
  var box=document.querySelector(".box");
  //事件的钩子函数,系统回调时
  box.onclick=function(ev){
        //回调函数
      console.log(ev)
      //特殊按键:altKey|shiftKey|ctrKey
      console.log(ev.altKey)
      //鼠标的点击点
      console.log(ev.clientX,ev.clientY)

  };

  var sup=document.querySelector(".sup");
  var sub=document.querySelector(".sub");

  //事件默认有冒泡,子级响应事件后，会将事件传递给父级相同的事件，也会被激活，最终传递给document
  sub.onclick=function(ev){
      console.log("子级被点击了")
      console.log(ev)
      //取消冒泡,当自身处理事件后，该事件就处理完毕,结束,不再向上传递
      ev.cancelBubble=true;
  };

  sup.onclick=function(){
      console.log("父级被点击了")
  };

  document.onclick=function () {

      console.log("文档被点击了")
  }

</script>
    <script>
      var aBtn=document.querySelector("a")
        aBtn.onclick=function(ev){
          ev.cancelBubble=true;  //取消冒泡
          console.log("a被点击了");
          //手动转跳页面
            open('http://www.oldboyedu.com',"_self");
            //a标签默认会完成转跳,取消默认事件
            return false;
        }

    </script>
</body>
</html>

      总结:  1.系统回调事件函数时, 传递了一个 事件(event) 实参

                2.如果要使用传递来的实参 事件(event), 定义接收的 形参 即可

                3.box.onclick = function(ev){
                     // 使用事件对象
                     // 特殊按键 eg: ev.altKey: true | false
                     // 鼠标触发点: ev.clientX | ev.clientY
                   // 取消冒泡
                      ev.cancelBubber = true;
                   // 取消默认事件
                       return false;
                    }

Petrus_shuai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript-Advanced:JavaScript-高级JavaScript-基础知识
03-08
"JavaScript-Advanced"主题聚焦于JavaScript的高级特性，旨在帮助开发者深入理解并掌握JavaScript的精髓，从而编写出更高效、更具可维护性的代码。 在JavaScript的基础知识中，首先我们需要了解它的基本语法。...
JavaScript——高级事件
m0_56783154的博客
03-06 621
目录JavaScript——高级事件1. 目标2. JavaScript——高级事件 1. 目标 能够写出元素注册事件的两种方式 能够说出删除事件的两种方式 能够说出DOM事件流的三个阶段 能够利用事件对象完成跟随鼠标案例 能够封装阻止冒泡的兼容性函数 能够说出事件委托的原理 能够说出常用的鼠标和键盘事件 2. ...
js操作高级
weixin_43183295的博客
12-20 123
1.对象使用的高级 对象的key为字符串类型, value为任意类型 var obj = { name: "name", "person-age": 18 } // 访问 obj.name | obj["name"] obj["person-age"] 对象的属性可以任意添加与删除 var obj = { name: "obj" } // 删除 delete ob...
高级事件的内容
whaoe999的博客
03-10 89
注册事件概述 给元素添加事件，称为注册事件或者绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 传统注册方式 利用on 开头事件 onclick (1)<button onclick = "alert('hi~')"></button> (2)btn.onclick = function(){ ........ } 特点：注册事件的唯一性：同一个元素同一个事件 只能
JavaScript - 常用事件总结
LIN的博客
10-18 289
目录 一、事件的两种绑定方式  1、on事件绑定方式 2、非on事件绑定方式 二、事件参数event  三、事件的冒泡与默认事件  1、事件的冒泡：子位于父内部，子触发，父也一起触发事件。  1-1 取消冒泡事件的方式一：子级内部设置stopPropagation()  1-2 取消冒泡事件的方式二：子级内部设置.cancelBubble = true; 2、默认事件的两种取消方...
JS高级中的this实战使用过程的一些心得
weixin_30902675的博客
03-10 85
1 function fn() { 2 return this; 3 } 4 console.log(fn()); //控制台输出的是window 5 6 var a = new fn(); 7 console.log(a); //控制台输出的是fn() 8 -------------------------...
Javascript-Koans-Solutions
05-21
随着您的学习越来越深入，将引入越来越多的Javascript语法，这将使您能够解决更复杂的问题并使用更高级的技术。从浏览器运行Koans 只需使用文件浏览器导航到Javascript Koans文件夹，然后双击KoansRunnner.html。 ...
0214-高级-javascript
02-14
"0214-高级-javascript"主题通常涵盖了JavaScript中的高级特性和实践，旨在帮助开发者深入理解和掌握这门语言。在这个主题中，我们可以探讨以下几个重要的知识点： 1. **原型与原型链**：JavaScript的对象具有原型...
javaScript-javascript-初级到高级-笔记.docx
09-30
理解并熟练掌握JavaScript的基本语法、DOM操作和事件处理，是成为优秀前端开发者的必备技能。随着技术的发展，JavaScript也在服务器端（Node.js）和其他领域得到广泛应用，成为了一种全栈式编程语言。
javascript-learning-Javascript学习
最新发布
06-28
JavaScript是一种高级的、动态的、基于对象的脚本语言，主要用于客户端的脚本编程。它可以使网页更加interactive和动态。其次，选择合适的学习资源。有很多在线资源可以学习JavaScript，例如视频教程、博客、书籍等...
事件高级
qingkao123的博客
12-13 207
注册事件（绑定事件） 注册事件概述 给元素添加事件，称为注册事件或者绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 传统注册方式 利用on开头的事件 onclick <button onclick= "alert('hi~')"></button> ...
JavaScript里面的坑（一）——读《JavaScript高级程序设计》有感
blankmanp的专栏
04-06 1458
JavaScript里面的对象&创建对象的方法
javascript知识分享——事件高级
DS153的博客
11-22 399
目录 前言 一、注册事件 1.传统注册方式 2.方法监听注册方式 二、删除事件 1.传统注册事件的删除方式 2.方法监听注册方式 三、DOM事件流 四、事件对象 1.事件对象的使用语法 2.事件对象的常见属性和方法 五、阻止事件冒泡 六、事件委托 七、鼠标事件 1.触发鼠标事件 2.禁止鼠标右键和选中 3.鼠标事件对象 八、键盘对象 1.触发键盘对象 2.键盘事件对象 总结 前言 在之前的webAPI里面我们了解到了关于DOM...
javascript高级
Denisedan的博客
08-28 1498
对象 对象是一种数据类型 对象是以键值对存储数据的一种容器(属性和方法) var per = { name: "张三", age: 18, sayHi: function() {} }; 对象是对现实世界单个实物的一种抽象 如对一辆车的描述 特征:品牌 颜色 型号 行为… var car = { brand: "奔驰", color: red, driving: ...
onclick="function()"和onclick="return function();"区别
热门推荐
阶段丶成长的博客
08-02 1万+
onclick="function()" 表示只会执行 function , 但是不会传回 function 中之回传值onclick = "return function()" 则是 执行 function并传回 function 中之回传值 eg： function doAlert() { var fail_this_check = true; if(fail_this_ch
php下的原生ajax请求
YUSIR 完美CODING世界
09-20 1299
浏览器中为我们提供了一个JS对象XMLHttpRequet，它可以帮助我们发送HTTP请求，并接受服务端的响应。 意味着我们的浏览器不提交，通过JS就可以请求服务器。   ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。   1、创建XHR对象 1 var xhr
《前端》onclick= function() 、onclick= return function() 、return false的区别介绍。
BelleDiao的博客
05-21 1877
现在在做薪酬二期的。 οnclick="function()" 表示只会执行 function , 但是不会传回 function 中之回传值 onclick = "return function()" 则是 执行 function并传回 function 中之回传值。 <script> function doAlert() { var fail_this_check = true; if(fail_this_check) return false;
Java中的匿名函数格式_JavaScript中的匿名函数、立即执行函数和闭包
weixin_35676745的博客
02-24 293
匿名函数是没有函数名的，不能单独使用；立即执行函数是基于匿名函数实现的，也没有函数名，会在定义后立即执行；闭包是有权访问另一个函数作用域中的变量的函数。匿名函数、立即执行函数只要满足 有权访问另一个函数作用域中的变量 这一个条件，就成了闭包。匿名函数匿名函数：没有函数名的函数匿名函数不能单独定义与使用function foo() {console.log('普通函数');}// 去掉函数名 foo...
JavaScript——事件高级
weixin_61920612的博客
03-24 238
JavaScript——事件高级

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值