js事件委托的优点
1、绑定在父元素上只需要绑定一次，节省性能。2、子元素不需要每个人都绑定同一个事件。3、如果后续添加新的子元素，由于事件委托，会自动接收父元素的事件监控。实例//原生js事件委托的例子，css部分可以忽略<!doctype html><html><head><style>ul{list-style: none;display: flex;}ul li{width: 50px;height: 5...
2024-01-10
js自定义事件的实现
1、指定谁是发布者。2、给发布者添加一个缓存列表来存储回调，以便通知订阅者。3、发布消息时，发布者会遍历这个列表，依次触发存储在其中的订阅者回调函数。实例const salesOffices = {} // 定义售楼处 salesOffices.clientList = [] // 缓存列表，存放订阅者的回调函数 salesOffices.listen = function(fn) ...
2024-01-10
js中事件捕获的实现
1、当鼠标点击或触发dom事件，触发dom事件的元素称为事件源。2、浏览器会从根节点=>事件源(从外到内)传播事件。3、不太具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件。实例 <div id="s2">s2</div></div><script> s1.addEventListener("click",function(e){ console.log("s1 冒泡事...
2024-01-10
js事件委托如何理解
1、每个函数都是对象，占用内存。内存中的对象越多，性能越差。解决事件处理过多问题的办法是事件委托。2、事件委托冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。实例<ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text3</li></ul>以上就是j...
2024-01-10
js中事件冒泡的使用
1、事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。2、当一个元素接收到事件后，会沿着DOM结构将事件逐层传递到其父元素上。实例<body id="body"><div id="box1"><div id="box2"><span id="span">This is a span.</span></div></div></body>以上就是js中事件冒泡的使用，希望对大家有所帮助...
2024-01-10
js中有哪些焦点事件
1、blur当元素失去焦点时触发。事件不会冒泡，所有浏览器都支持。2、focus当元素获得焦点时触发。事件不会冒泡，所有浏览器都支持。3、focusin等于focus事件，但它冒泡。4、focusout是HTML事件blur的通用版本。实例// 焦点事件：模拟输入框的placeholder功能 var oInput1 = document.getElementById("input1"...
2024-01-10
js添加绑定事件的方法
先介绍js添加事件通用方法，具体内容如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件：firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签，绑定了2个弹出事件</p> <script> function test1() { alert("tes...
2024-01-10js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性attachEvent方法 只支持IE678,不兼容其他浏览器addEventListener方法 兼容火狐谷歌,不兼容IE8及以下addEventListener方法div.addEventListener('click',fn);div.addEventListener('click',fn2);function fn(){ console.log("春雨绵绵"); }func...
2024-01-10深入分析js的冒泡事件
在javascript的dom操作做肯定会遇到js的冒泡事件，最常见的是div弹窗事件如图解当点击灰色部分是弹窗消失，点击黑色部分时没有效果。通过下面一段代码来分析js的冒泡事件html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js冒泡事件</title> <link rel="stylesheet" href="styl...
2024-01-10js禁止浏览器的回退事件
直接来个终极方案：查找了好多资料才找到的，这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。<script language="javascript"> //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); });</script>现在，我...
2024-01-10js计时事件实现圆形时钟
本文实例为大家分享了js圆形时钟效果的具体代码，供大家参考，具体内容如下代码：<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>时钟</title> <style> *{margin: 0; padding: 0;} div.dd{ margin: 0 auto; width: 400px; padding-top: 100px; } </style></head><body><div class="dd"> <canvas id="...
2024-01-10
【JS】js监听按键事件
背景：很多时候需要用键盘操作，来触发事件，因此监听键盘操作是非常重要的事情，这里我简单的讲下如何操作。1.添加事件element.onkeyup = function(e){// 这里可以通过if语句来判断点击的是否符合需要的按键if(e.keyCode ====一个健值){}}ps：有朋友会问e.keyCode是什么，你可在按键事件中打印这个e，console....
2024-01-10js键盘事件实现人物的行走
本文实例为大家分享了js键盘事件实现人物行走的具体代码，供大家参考，具体内容如下描述：小时候喜欢玩的一个游戏，魔塔，实现了人物的行走，以及跳跃，当然是2D的效果。用到的图：效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html { bac...
2024-01-10易被忽视的js事件问题总结
一、跨平台事件什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。下面我们来看一下DOM和IE之间...
2024-01-10浅析js绑定事件的常用方法
浅析js绑定事件的常用方法 <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" c...
2024-01-10js事件冒泡与事件捕获详解
（一）事件绑定1.普通事件绑定给html添加一个以on开头的特定的属性（如onclick，onfocus）;<button id="A" onclick="alert(this.id)">方式一</button><button id="A" onclick="handler(this)">方式二</button><script> function handler(btn){ alert(this.id); //undefined this指向window对象 alert(btn.id); //A }</s...
2024-01-10
js中load事件如何理解
1、在window上触发页面完全加载(包括所有图像、js文件、css文件等外部资源)。2、当所有框架加载完毕时，触发框架集。3、当图像加载完成时，触发元素。4、当嵌入内容加载完成时，触发元素。实例/*第一种方式*/EventUtil.addHandler(window,"load",function(event){ //进行相应的操作})/*第二种方式*/<body onload="...
2024-01-10js实现动态创建的元素绑定事件
新创建的元素用传统的办法无法绑定，需要用live方法。例： $('.rule').live('mouseover', function () { $(this).addClass("cancelable");以上这篇js实现动态创建的元素绑定事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。...
2024-01-10两种js监听滚轮事件的实现方法
前段时间在写前端的时候，需要监听浏览器的滚轮事件网上查了一下，找到两种监听滚轮事件的方法：一、原生js通过window.onscroll监听//window.onscroll = function() {//为了保证兼容性，这里取两个值，哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发...
2024-01-10js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下：在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部”js网页滚动条滚动事件<style type="...
2024-01-10js实现滑动触屏事件监听的方法
本文实例讲述了js实现滑动触屏事件监听的方法。分享给大家供大家参考。具体实现方法如下：function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top = $(span).o...
2024-01-10js事件委托和事件代理案例分享
什么是事件委托/事件代理 利用事件的冒泡传播机制（触发当前元素的某一个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来...
2024-01-10js闭包引起的事件注册问题介绍
背景：闲暇时间看了几篇关于js作用域链与闭包的文章，偶然又看到了之前遇到的一个问题，就是在for循环中为dom节点注册事件驱动，具体见下面代码：<!DOCTYPE html><html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1">1</button> <button id="anchor2">2</button> <button id="a...
2024-01-10js中事件对象和事件委托的介绍
Ie9以下浏览器中的事件对象是放在全局中的window.event;解决兼容性：event = event || window.event事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变）：event.target（点击的目标对象）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...
2024-01-10js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，没有事件监听的机制，对于事件监听的兼容性问题是最大的难题：1.直接把事件...
2024-01-10
