事件的绑定

于 2023-11-12 21:03:01 发布
阅读量122 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65916942/article/details/134365012
版权

一、事件的三种方式

   1 、行内绑定

    2、动态绑定

    3、监听绑定

  一、行内绑定 

注意事项：行内绑定的时候 this 是指向windower

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div onclick="fn()">盒子</div>
    <script>
          // 1. 绑定事件

          function fn(){
            console.log('行内绑定');
            alert(111);

            // 注意：行内绑定时，this指向window
            console.log(this)
        }
    </script>
</body>
</html>

 二 、动态绑定

   注意  当调用已经写好的函数时候 就不用加（）

<body>

    <button id="btn3">按钮</button>

    <script>

         // 1.2 动态绑定

        // 绑定相同的多个事件时，后面的会覆盖前面的

        document.querySelector('#btn3').onclick = function(){

            console.log('动态绑定');

        }

        document.querySelector('#btn3').onclick = function(){

            console.log('动态绑定1111111');

            console.log(this)

        }

        document.querySelector('#btn3').onclick = fn;

    </script>

</body>

三、监听绑定

  addEventListener：绑定监听事件，可以给同一元素绑定多个相同事件（不会发生事件覆盖）

  参数一：事件类型，字符串，注意不带on前缀

  参数二：事件具体要执行的函数

注意 当应用函数的时候 就可以直接用函数名 不要加括号

this 指向的元素 是被绑定的元素 也就是事件源

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button id="btn1">按钮</button>

    <button id="btn2">按钮</button>

    <script>

     

        //  监听绑定

        // addEventListener：绑定监听事件，可以给同一元素绑定多个相同事件（不会发生事件覆盖）

        // 参数一：事件类型，字符串，注意不带on前缀

        // 参数二：事件具体要执行的函数

      //方式一

      document.querySelector('#btn1').addEventListener('click',function(event){

        alert("你好鸭");

        //this 指向的是被绑定的元素（标签）

        console.log(this);

      })

        //方式二  注意带引用函数时候 不用带括号

        document.querySelector('#btn2').addEventListener('click',fn)

       

        function fn(){

            alert(111);

            //this 指向的是被绑定的元素（标签）

            console.log(this);

        }

    </script>

</body>

</html>

 绑定事件行参

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

          .box{

            width: 1000px;

            height: 400px;

            background-color: pink;

            margin: 50px auto;

        }

        .child{

            width: 500px;

            height: 200px;

            background-color: blueviolet;

            margin: 0 auto;

        }

        .child1{

            width: 300px;

            height: 100px;

            background-color: green;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="child">

            <div class="child1"></div>

        </div>

    </div>

    <script>

         document.querySelector('.box').addEventListener('click', function(e){

            console.log('事件对象，有事件相关的信息e', e);

            //  e.target：触发事件的元素

            console.log('触发事件的元素',e.target)

            console.log('绑定事件的元素（事件源）',e.currentTarget)

            // this 指向绑定事件的元素（事件源）

            console.log(this)

        })

    </script>

</body>

</html>

  preventDefault()的用法 作用是 阻止默认行为（事件） 比如 a 标签的跳转

<body>

    <a href="https://www.baidu.com/?tn=15007414_12_dg">跳转</a>

    <script>

        document.querySelector('a').addEventListener('click',function(e){

            // 阻止默认行为（事件），重点

            e.preventDefault();

        })

    </script>

</body>

阻止事件的冒泡

<div1 id="box1">

<div2 id=box2>

<div3 id=box3></div3>

</div2>

</div1>

冒泡事件

当三个盒子都绑定了监听事件时候 当点击box3 这时候会发生冒泡 box2 box1的事件监听都会发生 要使这种情况不会发生 只需要在div3上添加

 e.stopPropagation(); 这个代码就好 了

最后总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box,.box1{
            width: 1000px;
            height: 400px;
            background-color: pink;
            margin: 50px auto;
        }
        .child,.box2{
            width: 500px;
            height: 200px;
            background-color: blueviolet;
            margin: 0 auto;
        }
        .child1,.box3{
            width: 300px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 1.1 行内绑定 -->
    <button onclick="alert('点击')">按钮</button>
    <button onclick="fn()">按钮</button>
    <button id="btn3">按钮</button>
    <button id="btn4">按钮</button>
    <button id="btn5">按钮</button>

    <div class="box">
        <div class="child">
            <div class="child1"></div>
        </div>
    </div>

    <a href="">跳转</a>

    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>

    <script>
        // 1. 绑定事件

        function fn(){
            console.log('行内绑定');
            alert(111)

            // 注意：行内绑定时，this指向window
            // 动态和监听绑定时this指向绑定事件的元素
            console.log(this)
        }

        // 1.2 动态绑定
        // 绑定相同的多个事件时，后面的会覆盖前面的
        document.querySelector('#btn3').onclick = function(){
            console.log('动态绑定');
        }
        document.querySelector('#btn3').onclick = function(){
            console.log('动态绑定1111111');
            console.log(this)
        }
        document.querySelector('#btn3').onclick = fn;

        // 1.3 监听绑定
        // addEventListener：绑定监听事件，可以给同一元素绑定多个相同事件（不会发生事件覆盖）
        // 参数一：事件类型，字符串，注意不带on前缀
        // 参数二：事件具体要执行的函数
        document.getElementById('btn4').addEventListener('click', function(event){
            // 执行动作

            // alert(1122)
            console.log('event', event)
        })
        document.getElementById('btn4').addEventListener('click', fn)

        document.querySelector('.box').addEventListener('click', function(e){
            console.log('事件对象，有事件相关的信息e', e);

            //  e.target：触发事件的元素
            console.log('触发事件的元素',e.target)

            console.log('绑定事件的元素（事件源）',e.currentTarget)

            // this 指向绑定事件的元素（事件源）
            console.log(this)

        })

        document.querySelector('a').addEventListener('click', function(event){
            // 阻止默认行为（事件），重点
            event.preventDefault();

            // document.querySelector('a').style.color = 'blue'

            // this.style.color = 'red'

            event.currentTarget.style.color = 'pink'

        })

        // 事件的冒泡：由内到外，一层一层外往执行，box3 -> box2 -> box1 -> body (点击box3)
        document.querySelector('.box1').addEventListener('click', function(e){
            console.log('粉色')

        })
        document.querySelector('.box2').addEventListener('click', function(e){
            console.log('紫色')

        })
        document.querySelector('.box3').addEventListener('click', function(e){
            console.log('绿色')
            // 阻止事件冒泡，重点
            e.stopPropagation();
        })
        document.querySelector('body').addEventListener('click', function(e){
            console.log('body')

        })

        document.getElementById('btn5').addEventListener('click', getFn)

        function getFn(){
            console.log(22222);

            // 移除监听事件   
            document.getElementById('btn5').removeEventListener('click', getFn);
        }

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

代代烧烤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浅谈jQuery事件绑定原理
10-24
jQuery事件绑定原理的核心在于其内部的$.data方法，这个方法允许开发者为DOM元素绑定和存储自定义数据。当使用jQuery的方法对DOM元素进行事件绑定时，jQuery会创建一个与该元素相关的事件列表，并将其存储在数据对象...
jQuery事件绑定方法学习总结(推荐)
10-21
jQuery事件绑定方法是jQuery库中用于处理用户交互和DOM元素动态行为的核心机制。本文将深入探讨其中的几个关键方法：on(), bind(), delegate(), 和 live()，并对比它们的使用场景和优缺点。 首先，`bind()`是jQuery...
js(jquery)绑定点击事件
热门推荐
美丽的泡沫
07-22 2万+
test 第一种 $("#test").click(function(event) { /* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false); 第三种 html
DOM操作中的事件绑定方式（行内绑定，句柄式，多线程模式）以及解除绑定的方法
weixin_51509116的博客
03-01 620
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <t...
给Button绑定事件的方法
classicning的专栏
03-16 1495
这里不谈框架。今天在给一个button绑定onclick的时候遇到一个小小的问题和发现。var button = document.createElement("input");button.setAttribute("type","button");button.setAttribute("value","OK");首先，过去可以在IE6上行得通的最简单的方法[CODE_LITE]button....
vue 按钮绑定事件小案例
老段的CSDN的博客
10-12 1660
第四步：data给绑定class设置一个初始值。第二步：第一个div；第七步：绑定点击事件并判断样式。1、第一步：写一个div容器。第六步：给样式设置一个初始值。
事件监听、动态绑定、行内绑定的区别
qq_43143902的博客
10-24 1729
JS 事件绑定函数代码
10-29
JavaScript 事件绑定是Web开发中的一个关键概念，用于在用户与网页交互时执行特定的函数。在不同的浏览器中，事件绑定的实现方式有所不同，导致了跨浏览器兼容性问题。本篇将详细介绍如何编写一个兼容IE6、7、8以及...
JavaScript 事件处理 事件绑定 示例代码
最新发布
06-27
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
详解Canvas事件绑定
09-28
【Canvas事件绑定详解】 在HTML5中，Canvas提供了一个强大的绘图环境，允许开发者动态绘制图形、图片等。然而，由于Canvas本质上是一个位图，它并不像DOM元素那样可以直接监听和处理事件。当我们想要在Canvas上实现...
【JavaScript】如何为html按钮button绑定键盘事件（左键、右键、组合按钮、组合键）链接href绑定键盘事件 getElementById()、addEventListener()
Dontla的博客
07-29 2757
在上面的代码中，我们首先获取了上一页和下一页按钮的引用，然后使用addEventListener方法来监听整个文档的keydown事件。在事件处理程序中，我们检查按下的键是否是左键（keyCode为37）或右键（keyCode为39），如果是，则分别执行上一页按钮和下一页按钮的点击操作（通过调用click方法）。要为上一页和下一页按钮绑定键盘的左键和右键，可以使用JavaScript来实现。首先，需要为上一页和下一页按钮添加一个唯一的id属性，以便能够通过JavaScript选择它们。
78 事件的绑定方式
Blog of Lytracy
11-26 1112
文章目录1、行内绑定式2、动态绑定式3、行内绑定式与动态绑定式的异同4、事件监听式——dom2级方式事件设置事件监听的实现方式——早期版本的IE浏览器事件监听的实现方式——标准浏览器 事件绑定指的是为某个元素对象的事件绑定事件处理程序。 1、行内绑定式 事件的行内绑定式是通过HTML标签的属性设置实现的。 <标签名 事件="事件处理程序"> 标签名可以是任意的HTML标签，如<div>标签、<button>标签等； 事件是由on和事件名称组成的一个HTML属性，如单击
Android_安卓为按钮控件绑定事件的五种方式
u011555996的博客
11-20 1780
写在最前面 　　　　本次，来介绍一下安卓中为控件--Button绑定事件的五种方式。 二、具体的实现 　　　　第一种：直接绑定在Button控件上： 　　　　　　　　步骤1.在Button控件上设置android:onClick="，其中这个属性的属性值对应的是MainActivity类中的方法名字（自己创建的方法）： 　　　　　　　　　　　　 　　　　　　　　 步骤2.在MainAc...
为按钮和表单绑定事件常用的两种方式
qq_45344586的博客
06-28 2209
绑定事件常用的两种方式，以及其注意事项
关于jquery的obj.click()、和obj.on()以及行内的onclick事件
soos的博客
07-29 6014
一般通过jQuery写触发事件是我们通常写的是obj.事件类型()。 以下以点击事件为例： 通常我们直接写obj.click();实现点击事件的效果，但是这种写法不支持动态元素或样式绑定事件。 支持动态元素绑定事件的是.live()和.on()。live在jquery1.7以后就不推荐使用了。 行内的onclick事件也可以实现对js的动态绑定事件。 以下是我自己整理的关于三种写法的使用
JS DOM编程复习笔记 - 三种事件绑定方式（十三）
小帅的编程笔记
10-29 217
今天我们将学习在JavaScript 中的三种绑定事件的方法。这在面试中也是一道必考题目。 目录 行内绑定 DOM 0级事件绑定 DOM 2级事件绑定 1）行内绑定事件 行内事件名称通常是以on开头，比如点击事件为onclick，要将事件处理程序和元素关联，我们在元素上增加对应的事件属性，比如： <button onclick="alert('点击我!')">保存</button> 当然事件处理程序可以调用已定义的函数。 例如： <script> functio
jquery 常规绑定事件click与on委托绑定测试
海沙
03-24 504
看到一个前端面试题，也顺便学习了一下。
JavaScript中绑定事件的三种方法
qqliang1314的专栏
08-20 920
JS中有三种最常用的绑定事件的方法，如下文所示，这里重点说一下第三种，因为在不同的浏览器中存在差异。     第一种，也是见的最多的，在标签里绑定：       当点击按钮时触发事件  第二种，直接获取要绑定的对象后绑定：   //通过Id获取对象    var btn = documen.getElementById("button");     btn.onclick= func
事件行内绑定的函数必须为全局函数
xue123456_的博客
11-25 686
js事件行内绑定的函数为什么不能在window.onload函数中 在三种事件绑定方式中（行内绑定，DOM对象.属性方法，事件监听器方法），行内绑定可以一次性绑定多个事件，但绑定的事件不能在window.onload中。看以下代码 &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; window.onload=function(){ function di...
uniapp事件绑定
04-13
UniApp是一种跨平台的开发框架，可以同时开发iOS、Android和Web应用。在UniApp中，事件绑定是一种常见的操作，用于响应用户的交互行为。以下是关于UniApp事件绑定的介绍： 1. 事件绑定方式：UniApp支持多种方式进行事件绑定，包括在标签上直接使用@符号绑定事件、使用v-on指令绑定事件、使用@符号和v-on指令结合绑定事件等。 2. 常见的事件类型：UniApp支持多种事件类型，包括点击事件（tap）、长按事件（longpress）、滑动事件（touchmove）、输入事件（input）等。 3. 事件处理函数：在事件绑定中，需要指定一个事件处理函数来处理触发的事件。事件处理函数可以是页面中的方法，也可以是组件中的方法。 4. 事件对象：在事件处理函数中，可以通过参数获取到事件对象，从而获取触发事件的相关信息，如触发事件的元素、触摸点的坐标等。 5. 事件修饰符：UniApp还支持一些事件修饰符，用于对事件进行进一步的控制和处理，如.stop修饰符用于阻止事件冒泡、.prevent修饰符用于阻止默认行为等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值