js事件

1.事件类型

JavaScript可以处理的事件类型为：鼠标类型、键盘类型和HTML类型！（注意：所有的事件处理函数都由两个部分组成，on+事件名称。 ）

1.1、鼠标事件

click： 单击鼠标按钮时触发；

dblclick：当用户双击主鼠标按钮时触发；

mousedown： 当用户按下鼠标还未弹起时触发；

mouseup： 当用户释放鼠标按钮时触发；

mouseover： 当鼠标移到某个元素上方时触发；

mouseout： 当鼠标移出某个元素上方时触发；

mousemove：当鼠标指针在元素上移动时触发；

mouseenter： 在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；

mouseleave：鼠标移出；

1.2、键盘事件

keydown： 当用户按下键盘上任意键时触发，如果按住不放，会重复触发；

keyup： 当用户释放键盘上的键触发；

keypress： 当用户按下键盘上的字符键时触发，如果按住不放，会重复触发；

1.3、HTML类型

load： 当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发；

unload： 当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；

select： 当用户选择文本框（input或textarea）中的一个或多个字符触发；

change： 当文本框（input或textarea）内容改变且失去焦点后触发；

input： 输入；

focus： 当页面或者元素获得焦点时在window及相关元素上面触发；

blur： 当页面或元素失去焦点时在window及相关元素上触发；

submit： 当用户点击提交按钮在

元素上触发；

reset： 当用户点击重置按钮在元素上触发；

resize： 当窗口或框架的大小变化时在window或框架上触发；

scroll： 当用户滚动带滚动条的元素时触发；

2.js事件和jQuery事件的区别

有本质上的区别，语法上的区别，和JavaScript对象和JQuery对象的方法不能混用。

2.1、本质上的区别

2.1.1、JavaScript 是通过标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。

2.1.2、JQuery是一个JavaScript函数库。或者说是JavaScript中最流行的一种框架。

2.2、语法上的差异

2.2.1.入口函数不同 　　js：window.onload = function(){内部放js}　　　　　实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。　　jQuery: $(function(){})或者$ (document).ready(function(){}) 　　是在 html所有标签都加载之后，就回去执行。可以写多个。　　window.onload=function(){ 　　//js代码　　} 　　等同于　　$(window).load(function(){ 　　//jquery代码　　});

2.2.2.创建DOM元素 　　利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。　　而jQuery使用 $就可以直接创建DOM元素　　var oNewP =$ ("

使用jQuery创建的内容

"); 　　以上代码等同于javascript 　　var oNewP2 = document.createElement("p"); 　　var oText = document.createTextNode("这是使用javascript方法创建的内容"); 　　oNewP2.appendChild(oText); 　　例：使用jQuery创建DOM

2.2.3.获取元素 jquery：　　通过id获取，jquery的语法更为简练 $("#id").event; 通过class获取，$ (.“css”).event() 　　通过属性html标签获取， $(“p”).event()是选中所有的p标签元素　　　　通过属性值获取，$ (“div[csdn]”).event()是选中div的属性为csdn的元素　　event是对选中的元素的操作。　　 $(“div.p1”)和$ (“div .p1”)的区别。　　 $(“div.p1”)是对所有div进行筛选，选出class="p1"的div。$ (“div .p1”)是选中div下面的class="p1"的元素，不是这个div js：　　document.getElementById("elementId");//返回一个元素，按元素的ID名称来访问　　document.getElementsByName("elementName");返回一组元素，按元素的name名称来访问　　document.getElementsByTagName("tagName");返回一组元素，按标签来访问　　document.getElementsByClassName("classname");返回一组元素，按class来访问

2.2.4.操作属性节点a.JavaScript使用　 object.getAttribute(attribute)　　获取元素属性　 object.setAttrbute(attribute，value)　　设置元素属性　　

哈哈

　　　　b.JQuery使用　　.attr()传入一个参数获取，传入两个参数设置　　.prop()　　prop和attr一样都可以对文本的属性进行读取和设置；　　两者的不同在读取checked，disabled，等属性名=属性值的属性时　　attr返回属性值或者undefined，当读取的checked属性时不会根据是否选中而改变　　prop返回true和false 当读取的checked属性时会根据是否选中而改变　　也就是说attr要取到的属性必须是在标签上写明的属性，否则不能取到　　　　

哈哈

　　　　　　("#first").attr("name","nafirst");　　　　

("#first").removeAttr("name");

("#first").prop("id");　　　　

("#first").prop("name","nafirst");

("#first").removeProp("name");　　

2.2.5.操作文本节点a.JavaScript使用　　innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回　　innerText：取到或设置一个节点的HTML代码，不能取到css　　value:取到input[type='text']输入的文本　　　　

嘿嘿
嘿嘿

　　姓名：　　　　b.JQuery使用　　.html()取到或设置节点中的html代码.　　text()取到或设置节点中的文本　　.val()取到或设置input的value属性值　　　　

嘿嘿
嘿嘿

　　姓名：　　　　　　("#serven_times").html("呵呵");　　

("#eight_times").text();

("#eight_times").text("啦啦");　　

("#input").val();

("#input").val("哈哈");　　

2.2.6.操作css样式的时候 JavaScript: 　　1.使用setAttribute设置class和style 　　document.getElementById("first").setAttribute("style","color:red"); 　　2.使用.className添加一个class选择器　　document.getElementById("third").className = "san"; 　　3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法　　document.getElementById("four_times").style.fontWeight = "900"; 　　4.使用.style或.style.cssText添加一串行级样式：　　document.getElementById("five_times").style = "color: blue;";//IE不兼容　　document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;"; JQuery: 　　 $("#div2").css("color","yellow");$ ("#div2").css({ 　　"color" : "white", 　　"font-weight" : "bold", 　　"font-size" : "50px", 　　});

2.2.7.操作层次节点 JavaScript: 　　1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）　　children：获取当前节点的所有元素子节点（不包括文本节点）　　2.parentNode:获取当前节点的父节点　　3.firstChild:获取第一个元素节点，包括回车等文本节点　　firstElementChild:获取第一个元素节点，不包括回车节点　　lastChild、lastElementChild 同理　　4.previousSibling：获取当前元素的前一个兄弟节点　　previousElementSibling：：获取当前元素的前一个兄弟节点　　nextSibling、nextElementSibling

2.2.8.js和jquery转换 　　两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index); 　　(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。　　如：var $v =$ ("#v") ; //jQuery对象　　var v= $v[0]; //js对象　　alert(v.checked) //检测这个checkbox是否被选中　　(2)jQuery本身提供，通过.get(index)方法，得到相应的js对象　　如：var$ v= $("#v"); //jQuery对象 var v=$ v.get(0); //js对象　　alert(v.checked) //检测这个checkbox是否被选中　　js对象转成jQuery对象: 　　对于已经是一个js对象，只需要用 $()把DOM对象包装起来，就可以获得一个jQuery对象了。$ (js对象) 　　如：var v=document.getElementById("v"); //js对象　　var $v=$ (v); //jQuery对象　　转换后，就可以任意使用jQuery的方法了。

2.2.9、JQuery的文档就绪函数和window.onload的区别、JavaScript对象和JQuery对象的方法不能混用。

1.window.onload必须等待网页资源（包括图片等）全部加载完成，才能执行；而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行 2.window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖而文档就绪函数在一个页面中可以有N个

2.3.1、JavaScript对象和JQuery对象

① 使用 $("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法； *$ ("#div").click(function(){})√ * $("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法 * * 同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数

2.3.2、JavaScript对象和JQuery对象互转

*① JQuery ---> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象 * $("div").get(0).onclick = function(){} *$ ("div").[0].onclick = function(){} * ② JavaScript ---> JQuery :使用$()包裹JavaScript对象 (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件) *

3.事件对象（事件的常用属性和方法）

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如click mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准

JS事件