js事件操作语法

一、事件的绑定语法

语法形式1

    事件监听  标签对象.addEventListener('click',function(){});

语法形式2

    on语法绑定  标签对象.onclick = function(){}

on语法是通过 = 等于赋值绑定的事件处理函数 ,=   等于赋值本质上执行的是覆盖赋值,后赋值的数据会覆盖之前存储的数据,也就是on语法 一个标签对象相同的事件类型,只能赋值绑定 一个事件处理函数,如果赋值绑定多个事件处理函数,后赋的事件处理函数会覆盖之间存储的事件处理函数

事件绑定的三要素

    标签对象    事件源 也就是绑定事件的标签对象

    'click'          事件类型 也就是绑定给标签对象的事件的类型

    function(){}    事件处理函数 也就是触发事件时执行的函数程序

                          是回调函数语法形式,可以是函数名称,也可以是匿名函数

二、事件的删除语法

1.on语法绑定事件的删除

    因为 on语法是 = 等于赋值操作,只要赋值一个 null / 空函数,触发事件时就没有调用执行的函数程序达到删除事件的效果

2.事件监听语法的删除

    需要专门的删除函数方法:标签对象.removeEventListener('事件类型',事件处理函数);

    只能删除绑定的是函数名称的事件处理函数,如果绑定的是匿名函数,不能删除

注意:

    实际操作中,如果不需要删除事件处理函数,推荐使用匿名函数语法形式

    实际操作中,如果必须要删除事件处理函数,只能绑定函数名称

<!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">
  <title>Document</title>
</head>

<body>
  <div>我是div标签对象</div>
  <button>绑定</button>
  <button>删除</button>

  <script>
    //获取标签对象
    var oDiv = document.querySelector('div');
    var oBtn1 = document.querySelectorAll('button')[0];
    var oBtn2 = document.querySelectorAll('button')[1];

    oBtn1.addEventListener('click', function () {
      //on语法绑定事件
      //oDiv.onclick = function(){console.log(111)};

      //事件监听语法绑定
      //绑定的匿名函数
      oDiv.addEventListener('click', function () { console.log(111) });

      //绑定的函数名称
      oDiv.addEventListener('click', funA);
      oDiv.addEventListener('click', funB);
      oDiv.addEventListener('click', funC);

    })

    //删除绑定的事件
    oBtn2.addEventListener('click', function () {
      //删除on语法绑定的事件
      //oDiv.onclick = null;
      //oDiv.onclick = function(){};

      //绑定的匿名函数无法删除,因为两个匿名函数内存地址不同
      //假设绑定的内存地址是 00ff11
      //删除的内存地址可能是 00ffzz 
      //不能设定正确的删除的内存地址
      oDiv.removeEventListener('click', function () { console.log(111) });

      //绑定的是函数名称,函数名称中存储的是内存地址
      //以下可以删除
      oDiv.removeEventListener('click', funA);
      oDiv.removeEventListener('click', funB);
      oDiv.removeEventListener('click', funC);
    });

    function funA() {
      console.log('aaa');
    }
    function funB() {
      console.log('bbb');
    }
    function funC() {
      console.log('ccc');
    }
  </script>
</body>

</html>

三、默认事件

默认事件是html标签默认执行的程序效果

    有:超链接的点击跳转,form标签的点击跳转,鼠标右键

阻止默认事件

事件处理函数中定义一个形参 形参名称一般是 e / event

    标签对象.addEventListener('事件类型' , function( e / event ){

           // 阻止默认事件执行

           形参.prevenDefault();

    })

超链接

    给 超链接标签 添加 点击事件

form标签

    给 form标签 添加 submit 提交事件

鼠标右键

    给 document 添加 contextmenu 鼠标右键事件

四、阻止事件的传播

父级标签和后代标签添加了相同类型的事件,后代标签触发事件父级标签也会触发相同类型的事件,这样的执行原理称为事件的传播或者冒泡事件

阻止事件的传播语法

    标签对象.addEvenListener(事件类型,function(e/event){

           e.stopPropagation();  

  })

事件传播的方式

之前 旧版本 中 事件的传播方式有两种

    冒泡  子级 --- 父级

    捕获  父级 --- 子级

现在 新版本 浏览器中 默认只有 冒泡方式 没有 捕获方式

    事件监听语法绑定 事件处理函数

    参数3 如果设定 为 true 事件的传播 执行 捕获方式

五、常见的事件类型

1. window相关的事件类型

1.1 浏览器视窗窗口大小监听事件

    window.addEventListener( 'resize' ,function(){} )

1.2 页面滚动监听事件

    window.addEventListener( 'scrool',function(){} )

1.3 浏览器加载事件

    window.addEventListener( 'load',function(){})

1.5 新窗口打开url连接

    window.open(url地址)

1.6 关闭当前窗口

    window.close()

2. 鼠标相关的事件类型

  click              鼠标左键单击

  dblclick         鼠标左键双击

contextmenu  鼠标右键单击

  mousedown 鼠标按键按下

  mouseup      鼠标按键抬起

  mousemove 鼠标移动

  mouseover   鼠标移入   mouseenter

  mouseout     鼠标移出   mouseleave

3. 键盘相关的事件类型

   keydown     键盘按键按下

   keyup          键盘按键抬起

   keypress     键盘按键按下

4. 表单相关事件

   submit      表单提交事件

   focus        标签获取焦点

   blur           标签失去焦点

   change     标签失去焦点同时数据改变

   input         输入数据

5. 移动端事件

   touchstart  触摸开始

   touchend   触摸结束

   touchmove   触摸移动

6. 特殊事件

   transitionstart     过渡开始

   transitionend      过渡结束

   animationstart    动画开始

   animationend     动画结束

一定是绑定事件的标签 也就是 事件源 范围内 才能触发事件

全屏触发事件 需要给

    document

    document.documentElement

    document.body

绑定事件

    有些事件都能支持, 有些事件只有某个对象支持

六、事件对象

事件对象(event),事件处理函数中参数存储的数据数值,是触发事件的对象

触发事件的对象和绑定事件的不一定是同一个对象

触发事件时 JavaScript程序 自动向形参中存储实参

也就是 向 事件对象 中 自动储存 触发事件的标签对象 相关的数据信息

事件源.addEventListener(事件类型,function(时间对象){})

       事件对象.target

              存储的是触发事件的标签对象

              支持所有DOM操作语法

七、事件委托语法

不是直接给标签对象绑定事件,而是给父级标签绑定事件,通过事件对象.target判断触发事件的不同的标签对象,执行不同的函数程序

标签对象.target 就是一个DOM标签对象

    标签对象.target.tagName 是大写英文字符的标签名称

    标签对象.target 执行DOM操作,判断点击的是什么标签

如果有div标签包含span标签 h1标签 a标签 p标签 ,给各标签添加不同的点击事件

一般是获取每一个标签对象,绑定点击事件,阻止事件的传播

实际操作中,只要根据不同的条件,触发不同的if判断,执行不同的程序,就OK了

<!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">
    <title>Document</title>
</head>
<body>
    <div>
        我是div标签对象<br>
        <span>我是span标签</span>
        <h1 id="h1">我是h1标签</h1>
        <a href="JavaScript:;">我是a标签</a>
        <p>我是p标签</p>
    </div>

    <script>
        // 事件委托 
        // 给父级div标签添加点击事件
        // 通过 事件对象.target 判断 触发事件的是什么标签 
        // 根据不同的标签 触发执行不同的程序
        var oDiv = document.querySelector('div');

        oDiv.addEventListener('click' , function(e){
            // 事件委托 点击事件会触发 
            // 触发事件标签 标签名称是 div 证明点击的是div标签
            if( e.target.tagName === 'DIV' ){
                console.log( '您点击的是div标签' );


            }else if( e.target.tagName === 'SPAN' ){
                console.log( '您点击的是span标签' );
            
            
            }else if( e.target.id === 'h1' ){
                console.log( '您点击的是h1标签' );

            }else if( e.target.getAttribute('href') === 'JavaScript:;' ){
                console.log( '您点击的是a标签' );

            }else if( e.target.innerHTML === '我是p标签' ){
                console.log( '您点击的是p标签' );

            }
        });

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

分别点击各标签,执行结果如下:

热门文章

暂无图片
编程学习 ·

Java输出数组的内容

Java输出数组的内容_一万个小时-CSDN博客_java打印数组内容1. 输出内容最常见的方式// List<String>类型的列表List<String> list new ArrayList<String>();list.add("First");list.add("Second");list.add("Third");list.ad…
暂无图片
编程学习 ·

母螳螂的“魅惑之术”

在它们对大蝗虫发起进攻的时候&#xff0c;我认认真真地观察了一次&#xff0c;因为它们突然像触电一样浑身痉挛起来&#xff0c;警觉地面对限前这个大家伙&#xff0c;然后放下自己优雅的身段和祈祷的双手&#xff0c;摆出了一个可怕的姿势。我被眼前的一幕吓到了&#xff0c;…
暂无图片
编程学习 ·

疯狂填词 mad_libs 第9章9.9.2

#win7 python3.7.0 import os,reos.chdir(d:\documents\program_language) file1open(.\疯狂填词_d9z9d2_r.txt) file2open(.\疯狂填词_d9z9d2_w.txt,w) words[ADJECTIVE,NOUN,VERB,NOUN] str1file1.read()#方法1 for word in words :word_replaceinput(fEnter a {word} :)str1…
暂无图片
编程学习 ·

HBASE 高可用

为了保证HBASE是高可用的,所依赖的HDFS和zookeeper也要是高可用的. 通过参数hbase.rootdir指定了连接到Hadoop的地址,mycluster表示为Hadoop的集群. HBASE本身的高可用很简单,只要在一个健康的集群其他节点通过命令 hbase-daemon.sh start master启动一个Hmaster进程,这个Hmast…
暂无图片
编程学习 ·

Photoshop插件--晕影动态--选区--脚本开发--PS插件

文章目录1.插件界面2.关键代码2.1 选区2.2 动态晕影3.作者寄语PS是一款栅格图像编辑软件&#xff0c;具有许多强大的功能&#xff0c;本文演示如何通过脚本实现晕影动态和选区相关功能&#xff0c;展示从互联网收集而来的一个小插件&#xff0c;供大家学习交流&#xff0c;请勿…
暂无图片
编程学习 ·

vs LNK1104 无法打开文件“xxx.obj”

写在前面&#xff1a; 向大家推荐两本新书&#xff0c;《深度学习计算机视觉实战》和《学习OpenCV4&#xff1a;基于Python的算法实战》。 《深度学习计算机视觉实战》讲了计算机视觉理论基础&#xff0c;讲了案例项目&#xff0c;讲了模型部署&#xff0c;这些项目学会之后可以…
暂无图片
编程学习 ·

工业元宇宙的定义与实施路线图

工业元宇宙的定义与实施路线图 李正海 1 工业元宇宙 给大家做一个关于工业元宇宙的定义。对于工业&#xff0c;从设计的角度来讲&#xff0c;现在的设计人员已经做到了普遍的三维设计&#xff0c;但是进入元宇宙时代&#xff0c;就不仅仅只是三维设计了&#xff0c;我们的目…
暂无图片
编程学习 ·

【leectode 2022.1.15】完成一半题目

有 N 位扣友参加了微软与力扣举办了「以扣会友」线下活动。主办方提供了 2*N 道题目&#xff0c;整型数组 questions 中每个数字对应了每道题目所涉及的知识点类型。 若每位扣友选择不同的一题&#xff0c;请返回被选的 N 道题目至少包含多少种知识点类型。 示例 1&#xff1a…
暂无图片
编程学习 ·

js 面试题总结

一、js原型与原型链 1. prototype 每个函数都有一个prototype属性&#xff0c;被称为显示原型 2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 3. constructor 每个prot…
暂无图片
编程学习 ·

java练习代码

打印自定义行数的空心菱形练习代码如下 import java.util.Scanner; public class daYinLengXing{public static void main(String[] args) {System.out.println("请输入行数");Scanner myScanner new Scanner(System.in);int g myScanner.nextInt();int num g%2;//…
暂无图片
编程学习 ·

RocketMQ-什么是死信队列?怎么解决

目录 什么是死信队列 死信队列的特征 死信消息的处理 什么是死信队列 当一条消息初次消费失败&#xff0c;消息队列会自动进行消费重试&#xff1b;达到最大重试次数后&#xff0c;若消费依然失败&#xff0c;则表明消费者在正常情况下无法正确地消费该消息&#xff0c;此时…
暂无图片
编程学习 ·

项目 cg day04

第4章 lua、Canal实现广告缓存 学习目标 Lua介绍 Lua语法 输出、变量定义、数据类型、流程控制(if..)、循环操作、函数、表(数组)、模块OpenResty介绍(理解配置) 封装了Nginx&#xff0c;并且提供了Lua扩展&#xff0c;大大提升了Nginx对并发处理的能&#xff0c;10K-1000K Lu…
暂无图片
编程学习 ·

输出三角形

#include <stdio.h> int main() { int i,j; for(i0;i<5;i) { for(j0;j<i;j) { printf("*"); } printf("\n"); } }
暂无图片
编程学习 ·

stm32的BOOTLOADER学习1

序言 最近计划学习stm32的BOOTLOADER学习,把学习过程记录下来 因为现在网上STM32C8T6还是比较贵的,根据我的需求flash空间小一些也可以,所以我决定使用stm32c6t6.这个芯片的空间是32kb的。 #熟悉芯片内部的空间地址 1、flash ROM&#xff1a; 大小32KB&#xff0c;范围&#xf…
暂无图片
编程学习 ·

通过awk和shell来限制IP多次访问之学不会你打死我

学不会你打死我 今天我们用shell脚本&#xff0c;awk工具来分析日志来判断是否存在扫描器来进行破解网站密码——限制访问次数过多的IP地址&#xff0c;通过Iptables来进行限制。代码在末尾 首先我们要先查看日志的格式&#xff0c;分析出我们需要筛选的内容&#xff0c;日志…
暂无图片
编程学习 ·

Python - 如何像程序员一样思考

在为计算机编写程序之前&#xff0c;您必须学会如何像程序员一样思考。学习像程序员一样思考对任何学生都很有价值。以下步骤可帮助任何人学习编码并了解计算机科学的价值——即使他们不打算成为计算机科学家。 顾名思义&#xff0c;Python经常被想要学习编程的人用作第一语言…
暂无图片
编程学习 ·

蓝桥杯python-数字三角形

问题描述 虽然我前后用了三种做法&#xff0c;但是我发现只有“优化思路_1”可以通过蓝桥杯官网中的测评&#xff0c;但是如果用c/c的话&#xff0c;每个都通得过&#xff0c;足以可见python的效率之低&#xff08;但耐不住人家好用啊&#xff08;哭笑&#xff09;&#xff09…
暂无图片
编程学习 ·

读 NumPy 和 SciPy 文档

NumPy. URL: NumPy SciPy. URL: https://www.scipy.org/ 首先来一拨正名。所谓“SciPy”其实是个组织&#xff0c;负责一系列 Python 包的更新和维护。同时“SciPy”也指一个 Python 包。所谓“NumPy”则只是一个 Python 包。不论 NumPy 这个包还是 SciPy 这个包都由 SciPy 这个…