JS-事件

目录

事件  event

事件类型

执行事件的3个步骤:

获取事件源;

注册事件 (绑定事件)     {传统注册事件,方法监听注册事件}  (传统注册事件只有冒泡过程)

添加事件处理程序 (函数赋值的形式)

​编辑

​编辑

addEventListener    [ add 添加]  [Event 事件 ]  [listner 监听,听众]

addEventListener   方法监听注册方式

事件源.addEventListener("事件类型",function(){})   事件类型不加on,引号引起来; function是事件处理函数; 

移除事件: 事件源.removeEventListener('click', 处理函数, false);   //函数名要一致才能被移除;

attchEvent  注册事件 ie9以前的,兼容性差; IE专属

注册/移除事件的三种方式

事件流

事件对象,    e要加到事件函数中去;

e.targent  返回触发事件的对象(元素)

e.type 返回事件的类型

阻止默认行为   e.preventDefault()   [prevent 阻止]  [default 默认的]

阻止冒泡       [propagation 传播 ,宣传]

冒泡阶段, 从下到上; 通过e.stopPropagation() 进行阻止事件的冒泡

鼠标事件的对象

键盘事件的对象


事件  event

事件是可以被JavaScript侦测到的行为;浏览器监听用户行为的一种机制 ;

简单理解∶触发---响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件.

例如 :当用户使用鼠标 点击 一个按钮,会触发该按钮的 点击 事件 如果此时我们想要执行代码 就可以通过JS脚本设置 点击 事件的处理函数


事件事件三要素 : 事件源;    事件类型;  事件处理程序;

事件源:事件被触发的对象;

事件类型:即触发什么事件;   传统注册事件: on事件类型

事件处理程序: 通过函数赋值的方法完成;

传统注册事件;   on事件类型

var box = document.getElementById('box');     //获得事件源
box.onclick = function() {                                //事件源 box  //on事件类型 onclik   //事件的处理程序是 通过函数赋值;
  console.log('代码会在box被点击后执行');  
};

box.onclick = null;  //移除事件     事件源.on事件类型 = null; 移除事件


事件类型

鼠标事件  [mouses  [maʊs]  鼠标.老鼠]

鼠标事件的对象:

click 点击事件

dblclick 双击事件

mousedown 鼠标按下事件

mouseup 鼠标抬起事件(一次click包含一次mousedown和 一次mouseup)

mouseover 鼠标进入事件

mouseenter 鼠标进入事件

mouseout 鼠标离开事件

mouseleave 鼠标离开事件

mousemove 鼠标移动事件

键盘事件   [key 钥匙,键]

常见的键盘事件对象:

keydown 键盘键被按下

keyup 键盘键被松开

keypress  键盘按键 (不识别功能键)

执行顺序: keydown------keypress-------keyup

浏览器的事件

浏览器事件的对象:

load 页面中所有资源都被加载完毕的时候   [load 负载,加载]

scroll 页面的卷动

resize 页面尺寸发生变化  [resize 调整大小]

表单元素事件

表单元素事件的对象:

focus 当一个元素获取到焦点时

blur 当一个元素失去焦点时

change 当一个表单元素内容改变并失去焦点时

input 当一个表单元素内容有输入时

submit 当一个表单元素被提交时

reset 当一个表单被重置时

移动端事件   [touch 触摸]

移动端事件的对象:

touchstart 触摸开始事件 会在手指按下的时候触发

touchmove 触摸并移动 会在手指按下并移动的时候触发

touchend 触摸结束事件 会在手指离开的时候触发

其它事件

其他事件的对象:

animationstart 动画开始时触发

animationend 动画结束时触发

animationcancel 动画取消   [cancel [ˈkænsl]  取消]

transitionstart 过渡开始触发

transitionrun 过渡中

transitionend 过渡结束时触发

transitioncancel 过渡取消


执行事件的3个步骤:

  1. 获取事件源;

  2. 注册事件 (绑定事件)     {传统注册事件,方法监听注册事件}  (传统注册事件只有冒泡过程)

  3. 添加事件处理程序 (函数赋值的形式)

  4. 事件源 . on事件类型 = 事件处理程序(函数)


addEventListener    [ add 添加]  [Event 事件 ]  [listner 监听,听众]

addEventListener   方法监听注册方式

事件源.addEventListener("事件类型",function(){})   事件类型不加on,引号引起来; function是事件处理函数; 

第三个参数为true, 是捕获阶段; 为false或不写, 是冒泡阶段;

移除事件: 事件源.removeEventListener('click', 处理函数, false);   //函数名要一致才能被移除;

div2.addEventListener("click", function fn() {

        console.log(123);

        div2.removeEventListener("click", fn); //移除事件名字一致

      });


attchEvent  注册事件 ie9以前的,兼容性差; IE专属


注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;  //移除事件

box.addEventListener('click', 处理函数, false);   
box.removeEventListener('click', 处理函数, false);  //移除函数, 函数名要一致

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

事件流

只有绑定了事件才有事件流

  • 事件冒泡:当点击时 事件从最精确的元素 一层一层往上触发 直到最顶层元素 这个过程叫做事件冒泡  (由下到上)

  • 事件捕获:当点击时 事件从最顶层元素 一层一层的往下触发 直到最精确元素 这个过程叫做事件捕获   (由上到下)

最精确元素: 鼠标点到谁 谁就是最精确元素

最顶层元素:

高级浏览器 最顶层元素是window

IE中 最顶层元素是 document

 


事件对象,    e要加到事件函数中去;

div.onclick = function(e) {
    //  e 就是事件对象 我们可以根据它获取到许多的信息 兼容性有问题
    var e = e || window.event;  //兼容ie的写法
}

只有绑定了事件才有事件对象

e.targent  返回触发事件的对象(元素)

e.type 返回事件的类型

阻止默认行为   e.preventDefault()   [prevent 阻止]  [default 默认的]

  • 高级浏览器中 可以通过 e.preventDefault() 阻止默认行为

  • // 获取元素
    var a = document.getElementsByTagName("a")[0];
    // 设置点击事件
    a.addEventListener("click", function(e) {
       console.log("点击了a标签1111");
       e.preventDefault();
    }, false);

------------------------------------------------------------------------------------------

  • IE浏览器中 可以通过 e.returnValue = false; 阻止默认行为

  • // 获取元素
    var a = document.getElementsByTagName("a")[0];
    // 设置点击事件
    a.attachEvent("onclick", function(e) {
       console.log("点击了a标签1111");
       e.returnValue = false;
    });

-----------------------------------------------------------------------------------------------

  • DOM0级事件绑定方式中,可以通过return false进行阻止默认行为,也可以通过 e.preventDefault( );

  • // 获取元素
    var a = document.getElementsByTagName("a")[0];
    // 设置点击事件
    a.onclick = function() {
       return false;
    }


阻止冒泡       [propagation 传播 ,宣传]

冒泡阶段, 从下到上; 通过e.stopPropagation() 进行阻止事件的冒泡

高级浏览器中 可以通过e.stopPropagation() 进行阻止事件的冒泡

// 高级浏览器中
// box1是box2的父元素
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");

box1.onclick = function() {
   console.log("这是BOX1");
}
box2.onclick = function(e) {   //别忘了 e写到事件函数中去
   e.stopPropagation();
   console.log("这是BOX2");
}

----------------------------------------------------------------------------------------

IE浏览器中 可以通过e.cancelBubble = true 进行阻止事件的冒泡     //取消冒泡

// IE浏览器中
// box1是box2的父元素
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");

box1.onclick = function() {
   console.log("这是BOX1");
}
box2.onclick = function(e) {
   var e = e || window.event;
   e.cancelBubble = true;
   console.log("这是BOX2");
}


 <body>
    <ul class="ul">
      <li class="li1">今天是2021年6月6日21:32:11</li>
      <li>今天是2021年6月6日21:32:11</li>
      <li>今天是2021年6月6日21:32:11</li>
      <li>今天是2021年6月6日21:32:11</li>
      <li>今天是2021年6月6日21:32:11</li>
      <script>
        //事件委托,依靠事件冒泡阶段的原理,把事件绑定到父元素身上;
        var ul = document.querySelector(".ul");
        var li1 = document.querySelector(".li1");
        ul.addEventListener("click", function (e) {
          alert("我是ul");
            //通过e.target,返回点击对象,给点击对象更改样式
          e.target.style.backgroundColor = "skyblue";
        });
      </script>
    </ul>
  </body>

[context menu  上下文菜单]

 <body>
    <p>加油,加油</p>
    <script>
        //禁止鼠标右击
      var p = document.getElementsByTagName("p")[0];
      p.addEventListener("contextmenu", function (e) {
        e.preventDefault();
      });
      //禁止选中
      p.addEventListener("selectstart", function (e) {
        e.preventDefault;
      });
    </script>
  </body>

鼠标事件的对象

[client 客户端]  [page 页面]  [screen 屏幕]

 <body>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
    </style>
    <script>
      document.addEventListener("click", function (e) {
        //记得函数加e参数,XY大写的
        //cient 可视区的X Y 坐标
        console.log("clien x " + e.clientX);
        console.log("clien y " + e.clientY);
        // page 整个页面的X Y 坐标
        console.log("page x " + e.pageX);
        console.log("page y " + e.pageY);
      });
    </script>
  </body>


键盘事件的对象

<script>
      //键盘抬起
      document.addEventListener("keyup", function () {
        console.log("我按下了 keyup");
      });
      //键盘按键   不识功能键
      document.addEventListener("keypress", function () {
        console.log("这个是keypress");
      });
      //键盘按下
      document.addEventListener("keydown", function () {
        console.log("我按下了keydown");
      });
    </script>

 <script>
      document.addEventListener("keypress", function (e) {
        console.log(e.key);
        console.log(e.keyCode);// 返回按键的ASCII值, 区分大小写;
      });
    </script>

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值