JS-事件

菠萝啊菠萝蜜

已于 2023-09-03 11:24:56 修改

阅读量5.6k

点赞数 2

分类专栏： JS 文章标签： javascript 前端开发语言

于 2021-06-01 22:19:02 首次发布

梦开始时间2021/03/06

本文链接：https://blog.csdn.net/yuy20151225/article/details/117454740

版权

JS 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

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

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

编辑

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个步骤:

获取事件源;
注册事件 (绑定事件) {传统注册事件,方法监听注册事件} (传统注册事件只有冒泡过程)
添加事件处理程序 (函数赋值的形式)
事件源 . 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
评论
JS-事件

/事件源 box //on事件类型 onclik //事件的处理程序是通过函数赋值;IE浏览器中可以通过e.cancelBubble = true 进行阻止事件的冒泡 //取消冒泡。网页中的每个元素都可以产生某些可以触发JavaScript的事件.事件冒泡：当点击时事件从最精确的元素一层一层往上触发直到最顶层元素这个过程叫做事件冒泡。[ add 添加] [Event 事件 ] [listner 监听,听众]console.log('代码会在box被点击后执行');
复制链接

扫一扫

专栏目录