精华内容
下载资源
问答
  • 其中原始的事件模型被所有浏览器所支持 ,而 DOM2 中所定义的事件模型目 前被除了 IE 以外的所有主流浏览器支持 一原始事件模型 其事件类型 :分为 "输入事件 (如 onclicki" 和" 语义事件 (如 onsubmit" 事件程序的...
  • 常见几个javascript事件

    2011-05-02 22:08:45
    常见几个javascript事件当编辑时立即锁定记录,最安全的方式
  • 主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下
  • 主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等相关处理程序与操作技巧,需要的朋友可以参考下
  • JavaScript常见事件类型

    千次阅读 2018-08-09 14:15:38
    UI (User Interface) 事件,当用户与页面上的元素交互时触发 Load事件:当页面完全加载后,就会触发window上的load事件。 Unload事件:在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会触发。 ...

    UI (User Interface) 事件,当用户与页面上的元素交互时触发

    Load事件:当页面完全加载后,就会触发window上的load事件。

    Unload事件:在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会触发。

    Resize事件:当浏览器调整到一个新的高度或宽度时,就会触发resize事件。注意不要在这个事件中加入计算逻辑,避免性能问题。

            EventUtil.addHandler(window, "resize", function (event) {
                    //防抖函数
                    //每次调用函数都会清除之前的计数器,并重新计数,计数完成时,执行操作。
                var timer;
                return function () {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(function () { //setTimeout返回唯一标识符,可以使用它来取消计数器
                        console.log("123");
                    },500);
                }
            }());//此处的双括号表示,立即调用返回值

    Scroll事件:当用户滚动带有流动条的元素中的内容时,在该元素上面触发。

            EventUtil.addHandler(window, "scroll", function (event) {
                //函数节流
                var timer;
                return function () {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(function () { //setTimeout返回唯一标识符,可以使用它来取消计数器
                        if (document.compatMode == "CSS1Compat") {
                            //标准模式
                            console.log("Left:" + document.documentElement.scrollLeft);
                            console.log("Top:" + document.documentElement.scrollTop);
                        }
                        else {
                            //混杂模式
                            console.log("Left:" + document.body.scrollLeft);
                            console.log("Top:" + document.body.scrollTop);
                        }
                    }, 500);
                }     
            }());

     

    焦点事件,在页面获得或失去焦点时触发

    Blur事件:在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它;

    Focus事件:在元素获得焦点时触发。这个事件不会冒泡,所有浏览器都支持它;

    Focusin事件:在元素获得焦点时触发。 这个事件与HTML事件focus等价,但它冒泡,支持这个事件的浏览器有IE5+ safari5.1+ Opera11.5+ 和 Chrome;

    Focusout事件: 在元素获得失去时触发。 这个事件是HTML事件blur的通用版本,,支持这个事件的浏览器有IE5+ safari5.1+ Opera11.5+ 和 Chrome;

     

    鼠标与滚轮事件

    Click事件:在用户单机鼠标左键或按下回车键时触发。

    DbClick事件:用户双击鼠标左键时触发。

    MouseDown事件:在用户按下鼠标任意按钮时触发。

    MouseEnter事件:鼠标从外部首次移入到元素范围内触发。

    MouseLeave事件:鼠标移出元素范围之外触发。

    MouseMove事件:当鼠标指针在元素内部移动时重复触发。

    MouseOut事件:在鼠标指针位于一个元素上方,然后用户将其移入到另一个元素时触发。

    MouseOver事件:在鼠标指针位于一个元素外部,然后用户将其首次移入到另一个元素边界之内时触发。

    MouseUp:在用户释放鼠标指针时触发。

    几个鼠标坐标位置:

    1.客户区坐标位置

    鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置保存在事件对象的clientX和clientY属性中。

    2.页面坐标位置

    pageX和pageY能告诉你事件是在页面中什么位置发生的。换句话说,这两个属性表示光标在页面中的位置,因此坐标是从页面本身而不是视口左边或顶边计算的。

    在页面没有滚动的情况下,pageX和pageY和clientX和clientY是相等的。

    IE8及更早的版本不支持页面坐标位置,不过可以使用客户区坐标位置和滚动信息计算出来。

            EventUtil.addHandler(document.getElementById("div1"), "click", function (event) {
                //兼容IE8及之前版本
                event = EventUtil.getEvent(event);
                var pageX = event.pageX,
                    pageY = event.pageY;
                if (pageX === undefined) {
                    pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
                }
                if (pageY === undefined) {
                    pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
                }
                //console.log("pageX:" + pageX);
                //console.log("pageY:" + pageY);
            });

    3.屏幕坐标位置

    screenX和screenY属性可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。

    ps:EventUtil在https://github.com/AlexanderArima/XCYN/blob/master/XCYN.Web/Scripts/common.js可以找到

    展开全文
  • 主要介绍了JavaScript常见事件对象与操作,结合实例形式总结分析了javascript针对DOM、IE及跨浏览器事件对象的相关操作技巧,需要的朋友可以参考下
  • 主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
  • Javascript事件绑定常见方案详解

    万次阅读 2019-04-27 11:47:55
    常见的三种绑定方式 (1)在DOM元素上直接绑定事件 (2)在js标签(实现分离)中绑定事件 (3)通过DOM lev3级事件绑定标准(事件监听)绑定事件 第一种绑定方式(DOM元素上直接绑定) <button onclick=...

    开始

    让js对用户的操作做出相应的响应,就要对事件进行绑定
    DOM元素绑定事件处理function函数,不同的操作对应不同的函数名称

    常见的三种绑定方式

    (1)在DOM元素上直接绑定事件
    (2)在js标签(实现分离)中绑定事件
    (3)通过DOM lev3级事件绑定标准(事件监听)绑定事件

    第一种绑定方式(DOM元素上直接绑定)

    <button onclick="Mybtn()">单击</button>
    <script>
    	function Mybtn(){
    		window.confirm("我返回给用户的响应");
     	}
    </script>
    

    分析总结:当用户点击按钮时,触发Mybtn函数,然后返回,非常简单,这种直接写入元素中的方法很早就有,隶属于DOM的lev0级标准,所以兼容性非常好,IE8以下几乎没有问题,并且在全局范围内执行,因此Mybtn()内部的this指向全局对象window,需要注意是,想要操作这个被点击的DOM元素,this它是无效的。

    第二种绑定方式(js双标签中绑定事件/实现分离)

    <button id="btn">单击</button>
    	<script>
    		document.getElementById('btn').onclick=function(){
    			window.confirm("我返回给用户的响应,我是匿名函数");			
    		}
    </script>
    

    分析总结:首先获取DOM元素,将.onclick作为方法,属性值作为函数(匿名函数),这种方法会让文档结构清晰易维护和管理,并且函数内部的this直接指向该DOM对象,如果使用函数来调用其他函数(回调函数),DOM元素.οnclick=function{函数1(),函数2()},这时函数1/函数2的this就指向了window。
    缺陷:只能绑定一个事件,绑定处理一个函数,绑定两个的话第一个会被覆盖。
    注意:button标签必须放在script双标签之前,否则无效。

    第三种绑定方式(lev3级事件绑定标准-事件监听)

    <button id="Mybtn">单击</button>
    <script>
    	document.getElementById('Mybtn').addEventListener('click',fun);
    		function fun(){
    			alert("我返回给用户的响应");
    		 }
    </script>
    

    IE8标准

    语法:element.attachEvent(event, function)
    event:事件,IE标准需要加on,如onload
    function:函数,触发时执行的函数
    注意:
    (1)如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"
    (2)事件参数去掉事件名称的’on’(W3C标准)
    (3)事件处理函数中的this指向DOM节点自身(W3C标准)

    总结:

    常规的事件绑定只能绑定最后绑定的事件,而事件监听可以绑定多个事件,并且可以解除绑定,还可以封装事件监听,需要注意的是,IE8以下需要使用element.attachEvent(event,function)进行事件监听的绑定。

    展开全文
  • javaScript常见事件

    千次阅读 2013-05-11 09:57:14
    今天刚刚阅读javaScript常见事件做一个笔记。 常用事件: 1.onclick鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons...
    展开全文
  • JavaScript事件

    万次阅读 2014-12-30 10:18:49
    JavaScript事件,又称DOM事件,指用户对DOM节点进行各种操作时,能触发相应的处理函数。这些操作包括获取焦点、点击、键盘输入、鼠标悬浮、窗口变化等等。 一个JavaScript事件,包括事件绑定、事件触发、事件冒泡、...

    允许转载,但请注明出处:http://blog.csdn.net/sysuzjz/article/details/42262589

    事件基础

    JavaScript事件,又称DOM事件,指用户对DOM节点进行各种操作时,能触发相应的处理函数。这些操作包括获取焦点、点击、键盘输入、鼠标悬浮、窗口变化等等。

    一个JavaScript事件,包括事件绑定、事件触发、事件冒泡、事件捕获、事件处理。下面将详细描述。

    事件绑定

    事件有类型,大类可以分为鼠标事件、键盘事件、窗口事件、表单事件等,细分可以分为鼠标悬浮、鼠标移动、鼠标点击、鼠标按下等等,这里不一一阐述,详情可以去翻阅官方文档。类型有对应的写法,例如鼠标点击事件为click(注意不是onclick),鼠标按下为mousedown。
    事件需要绑定在某个DOM节点(包括顶层对象window),下面给出一段兼容各大主流浏览器的事件绑定代码:
    var addEvent = function(type, callback) {
        if (window.attachEvent) { // IE
            this.attachEvent.call(this, "on" + type, callback);
        } else if (window.addEventListener) {
            this.addEventListener.call(this, type, callback, false);
        } else {
            alert("无法绑定事件,请将浏览器版本发至评论");
        }
        return this;
    }
    注意addEventListener的第三个参数是设置事件是在事件捕获阶段进行还是在事件冒泡阶段进行,true表示在事件捕获阶段进行。事件捕获跟事件冒泡将在下文详细解说。

    事件捕获VS事件冒泡

    两者是亲兄弟一家亲,所以放一块来讲。它们发生在DOM节点嵌套并且父子(祖先-后代)都有事件绑定函数时。事件捕获从这些节点的最顶层开始,一直到最底层。而事件冒泡则相反,从最底层的目标开始,一直到最顶层。

    我们看以下情况:
    <div id="first">
        <span id="second">
            <b id="third">111</b>
        </span>
    </div> 

    我们先给它们绑定函数
    addEvent.call(document.getElementById("first"), "click", function(event) {
        console.log("first");
    });
    addEvent.call(document.getElementById("second"), "click", function(event) {
        console.log("second");
    });
    addEvent.call(document.getElementById("third"), "click", function(event) {
        console.log("third");
    });
    在谷歌中运行,我们可以看到,浏览器将依次输出third,second, first。这就是事件冒泡。
    即使我们将上述addEvent里的addEventListener第三个参数去掉,结果仍然不变。说明谷歌默认采用事件冒泡机制。实际上绝大多数浏览器默认采用事件冒泡机制(本人只测试了chrome,FF,IE,不过opera一般也会随大流),而IE只支持事件冒泡,IE的绑定事件 函数attachEvent甚至没有设置是否使用事件捕获的参数。
    而如果我们将addEventListener第三个参数设为true,结果将刚好相反,输出first,second,third。这就是事件捕获。当然,IE不支持。

    事件的冒泡有时不是我们需要的,也就是说,我们只需要子节点的事件,而不希望事件冒泡到父节点。我们可以取消冒泡。
    event.cancelBubble = true; 	// IE
    event.stopPropagation();		// 非IE
    其中,event为事件回调函数的参数,后文会详细说明。

    事件委托

    事件委托不是W3C标准定义的内容,而是一种利用事件冒泡机制的技巧应用。事件委托指的是将子节点的事件委托给祖先元素来执行,也即是触发子节点事件后,等到事件冒泡到某个祖先节点,触发该祖先节点同类型事件,并判断是否为目标子节点,如果是,执行它。
    下面给出一段简易的代码:
    <div id="first">
        <span id="second">
            <b class="third">111</b>
            <b class="third">222</b>
        </span>
    </div> 
    function delegate(node, childNodeClass, eventType, func) {
        addEvent.call(node, eventType, function(event) {
            var classes = event.target.className.split(" ");
            if(classes.indexOf(childNodeClass) > -1) {
                func(event);
            }
        })
    }
    调用时,
    var node = document.getElementById("first");
    delegate(node, "third", "click", function(event) {
        console.log(event.target);
    })

    在这里,我们是用的类名来判断,因为实际中用类名的比较频繁。当然,你也可以扩展此函数。
    事件委托有很多好处,当然,这些好处在当需要给很多同类节点添加事件,比如菜单栏的悬浮事件时,会更明显:
    1. 减少程序猿负担,不需要写DOM树遍历,优化性能
    2. 绑定事件很消耗性能,写委托能减少绑定事件的次数(只绑定一个祖先节点)
    3. 当新增节点的时候,不需要重新绑定事件

    event属性

    我们经常见到类似以下的代码:
    node.onclick = function(event) {
    
    }
    在事件处理函数中,event为其唯一的参数,包含了事件所有的信息和方法。这里我们挑几个常见的说一下:
    1. type:事件类型,和IE类似,但是没有“on”前缀,例如单击事件只是“click”。
    2. target:发生事件的节点。
    3. currentTarget:发生当前正在处理的事件的节点,可能是Target属性所指向的节点,也可能由于捕捉或者起泡,指向Target所指节点的父节点。
    4. eventPhase:指定了事件传播的阶段。是一个数字。
    5. timeStamp:事件发生的时间。
    6. bubbles:指明该事件是否冒泡。
    7. cancelable:指明该事件是否可以用preventDefault()方法来取消默认的动作。
    8. preventDefault()方法:取消事件的默认动作;
    9. stopPropagation()方法:停止事件传播。
    10. altKey,ctrlKey,shiftKey,meta:顾名思义,这些属性是指键盘、鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回的是一个布尔值。
    11. clientX、clientY:是指事件发生的时候,鼠标的横、纵坐标,返回的是整数,它们的值是相对于包容窗口的左上角生成的,在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是0,但是在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上 document.body.scrollLeft和document.body.scrollTop。
    12. keyCode:返回keydown和keyup事件发生的时候,按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键
    13. button:声明了被按下的鼠标键,是一个整数。0代表鼠标左键,1代表鼠标的中间键,2代表鼠标右键
    14. 还有很多属性,有兴趣的可以把event整个变量console出来看下
    展开全文
  • Windows(窗体) 文档(Document)框架(Frames) 浏览器对象(Navigator) 屏幕(Screen) 表单(Forms) 图片(Images) Document(文档)链接(links) Java小程序(Applets) 锚(Anchors) Button Checkbox Password Radio Text 表单...
  • 列出一些JavaScript常见事件,及其跟浏览器种类和版本的冲突
  • JavaScript常见事件

    千次阅读 2018-09-16 10:37:11
    1.onclick() 鼠标左键单击事件 2.onmouseover 鼠标进入事件 3.onmouseout 鼠标离开事件 4.onfocus 获取焦点事件 5.onblur 失去焦点事件 6.onmousemove 鼠标移动事件 7.onscroll 滚动条滚动事件 8. ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...script type="text/javascript">... 常见的UI(页面)事件 load resize 尺寸改...
  • JavaScript常见事件函数

    千次阅读 2018-09-18 22:17:23
    js的事件在实际项目中是用的非常多的,今天,总结一下基本并且常用的事件函数: 1. 鼠标事件:  onclick: 点击事件  ondblclick: 双击事件    onmouseover: 鼠标进入“某对象区域”  onmouseout: 鼠标离开“某...
  • 加载事件: 1. onload:一张页面或一幅图像完成加载。 4. 鼠标事件: 1. onmousedown 鼠标按钮被按下。 2. onmouseup 鼠标按键被松开。 3. onmousemove 鼠标被移动。 4. onmouseover 鼠标移到某元素之上。 5...
  • JavaScript 事件

    2019-07-31 14:22:33
    HTML 事件是发生在 HTML 元素上的事情。 当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。 HTML 事件 HTML 事件可以是浏览器行为,也可以是用户行为。...在事件触发时 JavaScript...
  • javascript事件编程

    千次阅读 2016-05-15 19:37:04
    javascript事件编程初探
  • 对于js的一些常见事件的总结
  • 本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法。分享给大家供大家参考。具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 html> head> script> function displayDate...
  • JavaScript 事件模型 事件处理机制

    万次阅读 多人点赞 2013-08-21 21:10:38
    这篇文章对于了解Javascript事件处理机制非常好,将它全文转载于此,以备不时之需。 什么是事件事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行...
  • JavaScript事件 DOMNodeInserted DOMNodeRemoved

    千次阅读 2018-12-14 10:32:48
    JavaScript事件 DOMNodeInserted DOMNodeRemoved  JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定交互的瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生...
  • 21- JavaScript 事件简介

    千次阅读 多人点赞 2019-11-04 09:35:09
    JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。 事件的三要素 事件的三要素:事件源、事件事件驱动程序。 比如,我用手去按开关,灯亮了。这件事情里,事件源是:手...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 96,353
精华内容 38,541
关键字:

常见的javascript事件

java 订阅