js 事件小结
- 1,事件对象
- e || window.event //ie
- 2, 取鼠标点击坐标 带有滚动条的
- var top = document.documentElement.scrollTop || document.body.scrollTop;//chorme
- var x = top + e.clientX; //可视区坐标
- 3, 获取屏幕坐标
- e.screenX e.screenY
- 4, shiftKey altKey ctrlkey
- 5,onkeydown/onkeyup keyCode 返回的是ASCII码 不区分大小写
- 6,onkeypress
- ff 返回keycode 所有的字符都返回0
- chorom/ie 返回keycode 支持大小写
- charCode 返回字符编码
- 7, 获取事件源
- target = e.target || e.srcElement
- target.tagName
- e.type
- 8, 事件流
- ff 先捕获然后再冒泡
- ie 冒泡
- 9, 取消冒泡
- e.stopPropagation() || e.cancelBubble = true;
- 10, addEventListener
- 1,解决调用两次,不会被覆盖 (ie倒着弹出)
- window.addEventListener('load',function(){
- alert('lv');
- },false);
- window.addEventListener('load',function(){
- alert('Miss.lv');
- },false);
- ff lv Miss.lv
- ie Miss.lv lv
- 2,解决传递两个相同的函数,只执行一次(ie没有解决,传递相同的两个函数)
- window.addEventListener('load',init,false);
- window.addEventListener('load',init,false);
- 3,this指向 (ie this 指向window)
- window.attachEvent('load',function(){
- var box = document.getElementById('box');
- box.attachEvent('onclick',function(){
- alert(this===window); //true
- })
- })
- function addEvent(obj,type, fn){
- obj.attachEvent('on'+type, function(){
- fn.call(obj,arguments);
- })
- }
- addEvent(window,'load',function(){
- var box = document.getElementById('box');
- addEvent(box,'click',function(){
- alert(this === box);
- })
- })
- 4,添加一个额外的方法,不会不覆盖
- 11, 移入 e.ralatedTarget e.fromElement mouseover
- 移出 e.ralatedTarget e.toElement mouseout
- 12, 阻止默认行为
- e.preventDefault();
- e.returnValue = false;
- 不能直接用return false;因为return false只能放到前面,后面的就不能执行了
- 13, 滚轮事件
- 非 ff mousewheel
- ff DOMMouseScroll
- wD : function(e){
- var e = this.getEvent(e);
- if(e.wheelDelta){
- return e.wheelDelta;
- }else{
- return -e.detail*40;
- }
- }
js 事件小结的更多相关文章
- js事件小结
首先事件绑定分为2种方法 一种为"DOM0级"方法,这里我理解为事件指定 var oDiv = document.getElementById("div1"); ...
- 深入浅出js事件
深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> & ...
- 一文梳理JS事件
JavaScript与HTML的交互是通过事件进行的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间. 事件流 事件捕获 事件冒泡 事件处理程序 事件委托 1. 事件流 如果单机页面上的某个按钮, ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡?
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
随机推荐
- windows安装Apache HTTP服务器报错:无法启动,因为应用程序的并行配置不正确
Apache HTTP服务器安装后报:无法启动,因为应用程序的并行配置不正确-(已解决) 0条评论 [摘要:本创做品,出自 “深蓝的blog” 专客,迎接转载,转载时请务必说明出处,不然有权穷究版 ...
- js 16进制字符串互转
/** * 16进制转换为字符串 * @param hex * @returns {*} */ function hexToString(hex) { var tmp = ''; if (hex.le ...
- php 简单分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 10步教你来优化WordPress速度 为服务器和访客减压
1.Cookie的静态化制作 约有80%至90%的时间,访客要花费大量的时间等你的WordPress加载静态内容.这意味着,有大部分的时间,用户浏览您的网站,他们正在等待加载,如:图像,CSS,JS脚 ...
- 一键分享到新浪微博、腾讯微博、搜狐微博、人人网、开心网、百度收藏等js代码大全
下面给大家一些分享的js代码,只要把代码插入自己的网页中稍微修改一下图片路径就可以用了,好了,废话少说,上代码: document.writeln("<b>喜欢本文,那就分享到 ...
- Python入门学习之input()与raw_input()的区别
登陆博客时才发现已经注册一年了,由于之前一直都没有打算从事软件开发行业,所以博客便被束之高阁,软件开发,对于我来说,是成长,更是磨炼.头脑风暴总是来去自由,记录灵感,与大家一起共享思维进步的成果. P ...
- Bootstrap 实例 - 模态框(Modal)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- key转成pvf
https://www.godaddy.com/help/converting-an-exported-pfx-code-signing-file-to-pvk-and-spc-files-using ...
- Linux文件夹执行权限
在Linux中,文件有三种权限--可读,可写,可执行.目录也有三种权限--可读,可写,可执行.但是实际上他们有着不同的意义. 对于文件: 可读 :表示可以读取文件里的数据: 可写 :表示可以改变和删除 ...
- Apache RewriteRule QSA 什么意思
看到下面这段代码: RewriteCond %{REQUEST_FILENAME} !-l RewriteRule ^(.+)$ index.php?url=$1 [QSA,L] The Rewrit ...