【js事件的方法】的更多相关文章

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的 通过以上这种方式进行事件函数的绑定有个缺点就是…

js事件技巧方法整合

window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveTo(0,0);//设置浏览器位置 })() screen.availHeight;//显示屏最高高度 screen.availWidth;//显示屏最宽宽度 /*窗口改变大小 事件*/ //js window.onresize = function() { if(resizeTimer==null)…

js事件的方法

事件的方法:onclick         鼠标单击ondblclick       鼠标双击onkeyup         按下并释放键盘上的一个键时触发 onchange        文本内容或下拉菜单中的选项发生改变onfocus          获得焦点,表示文本框等获得鼠标光标onblur           失去焦点,表示文本框等失去鼠标光标.onmouseover         鼠标悬停,即鼠标停留在图片等的上方onmouseout          鼠标移出,即离开图片等所…

js事件绑定方法

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定.举个例子: <input type="button" value="点我呦" onclick="alert("he…

封装Js事件代理方法

// 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(element.addEventListener){ // 给父元素添加事件 element.addEventListener(event,function(e){ // 获取当前触发的元素 var target = e.target; // 判断当前元素是否是我需要的 if(target.nodeName.…

js动态添加onload、onresize、onscroll事件(另类方法)

js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加.也就是说,它只能这样来(以 onload 为例,下同): 代码如下: window.onload = function() { // ... }; 但这有个问题,就是想再为 onload 增加新的事件处理程序时,不能直接为 window.onl…

Node.js事件的正确使用方法

前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的好处 这种方法能够使组件更加分离.在我们继续写程序时,会识别整个过程中的事件,在正确的时间触发它们,并为每个事件附加一个或多个事件监听器,这使得功能扩展变得更加容易.我们可以为特定事件添加更多的 listener,而不必修改现有的侦听器或触发事件的应用程序部分.我们所谈论的是观察者模式. 设计一个事…

原生js事件委托（事件代理）方法扩展

原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param sub {string}: 子节点选择器,如'.sub-item' * @param fn {function}: 事件回调方法 * @eg var ctn = document.querySelector('#menu_container'); * ctn.delegate('click','.…

JS三个事件绑定方法

1. JS三个事件绑定方法 1.1. 使用html进行事件绑定 1.直接在html标签上写入事件类型和事件处理方法. <button onclick = "alert('hello world')">click me!</button> 2.在html标签上写入事件类型,在js上写事件处理方法. html部分 <button onclick = "sayHello()">click me!</button> 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>…

H5_0003：JS禁用调试，禁用右键，监听F12事件的方法

1,禁用调试 // 这个方法是防止恶意调试的 (function () { console["log"]("================================设置控制台界面变化事件"); 'use strict'; var devtools = { open: false, orientation: null }; // inner大小和outer大小超过threshold被认为是打开了开发者工具 var threshold = 160; // 当检测…

JS事件监听的添加方法

一. 我们一般在的事件添加时是这样做的: elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器,但是存在一个问题,当同一个elm绑定多个事件时,只有最后一个事件会被添加 如:elm.onclick = handler1; elm.onclick = handler2; elm.onclick = hander3; 只有handler3会被添加执行,所以我们使用另外一种方法添加事件: 二. IE:attachEvent elm.attachEv…

js | javascript实现浏览器窗口大小被改变时触发事件的方法

转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 代码如下: <span id="info_jb51_net">请改变浏览器窗口大小</span><script>window.onresize = function(){document.getElementById("info_jb51_net…

dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化而触发一些效果,原本你要写 js 去绑定滚动事件,然后计算偏移量,然后更新元素 css,使用 dynamic-css,你只要根据语法去写好 css 表达式就可以了.对于一些原本需要复杂的 js 判断的动态 css,用 dynamic css 表达式几行代码搞定. 举两个例子: 元素跟随鼠标移动 实现…

JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板 2.使用chrome调试 在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息.点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置.不过这种方法并非总是可用,下面…

查看html元素绑定的事件与方法的利器

WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤其是JavaScript加载事件的方式五花八门,可以透过jQuery.element.click = function() { }.element.addEventListener()…,很难由单一处找出所有事件.而理不清事件来龙去脉,要追踪某个点击动作背后的行为就变得有些困难,直到我们遇到以下两种…

js事件浅析

js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮');">点击这个按钮</button> 二. 属性绑定(DOM0级事件) 只能绑定一个函数 button.onclick = function() {}; 三. 事件监听函数(DOM2级事件) element.addEventListener(<event-name>, &…

【转载】JS中bind方法与函数柯里化

原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table),权威指南上提到在ES3中利用apply模拟该方法的实现(JS权威指南中函数那章), 但无法真实还原该方法, 这也是真bind方法中的有趣特性. (原文这边理解有问题, 这段话的意思如果结合犀牛书上下文的意思, 再结合犀牛书中…

前端Js跨域方法汇总—剪不断，理还乱，是跨域

1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 CORS6.WebSockets JS跨域方法学习了很多,也实践了很多,一直没有完整的整理一下. js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的…

JS事件

JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的本质:是整个文档的根节点,所有的html都包含在document里面,      不过我们平时都是省略document          document.childNodes[0].tagName-->!          document.childNodes[1].tagName-->htm…

原生js事件和jquery事件的执行顺序问题

场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦点进行一些一些逻辑操作. 思路一:改写插件,使用回调函数或初始化函数. 原来的插件并没有使用回调函数或初始化函数.可以改写插件,增加回调函数或初始化函数,视情况,在原来逻辑执行之前或之后先执行逻辑操作. 思路二:使用原生js事件. 开始的时候并没有这个思路,但是由于原生js事件函数onfocus()…

C#中在AxWebBrowser控件注入JS脚本的方法

/// <summary> /// 窗体加载 /// </summary> private void JS_Load(object sender, EventArgs e) { this.axWebBrowser1.Navigate("www.baidu.com"); this.axWebBrowser1.DocumentComplete += axWebBrowser1_DocumentComplete; } /// <summary> /// W…

JavaScript学习06 JS事件对象

JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等: event对象只在事件发生的过程中才有效. firefox里的event跟IE里的不同,IE里的是全局变量,随时可用:firefox里的要用参数引导才能用,是运行时的临时变量. 在IE/Opera中是window.event,在Fi…

js 事件冒泡是什么如何用jquery阻止事件冒泡

什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢?因为事件源本身并没有处理事件的能力.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事…

js事件委托的方式绑定详解

js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能.还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的. 之前一直使用的是jquery的on方法做这样的事情,前几天看到公司项目中有实现这种方式的源代码,拿来仔细研究研究,跟大家分享分享. function $bindAction(dom, event, listeners) { #…

js事件监听器用法实例详解

这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法.而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行.如下: window.onload = function(){   v…

js事件绑定细节说明

javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触javascript的时候,老师都会这样教导我们怎么触发事件,在页面某个DOM节点上面添加所要触发的事件,比如:onclick,onmousedown,onmouseup,onfocus,onchange等等...看代码 <!DOCTYPE html> <html> <head>…

延迟加载图片插件LazyLoad.js的使用方法

我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt Mlinac制作的YUI ImageLoader工具箱. 后来就形成了一个比较完整的jQuery插件:jquery.lazyload.js . 下面就介绍一下jquery.lazyload.js的使用方法: Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: <scr…

Node.js 事件

Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.readStream对象会在文件被打开的时候发出一个事件. 所有这些产生事件的对象都是 events.EventEmitter 的实例. 你可以通过require("events");来访问该模块. 下面我们用一个简单的例子说明 EventEmitter 的用法: //even…

JS事件冒泡

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形 式出现.使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方…