一、原生js的事件的绑定
1、通过JavaScript对象属性进行绑定
document.getElementById("test1").οnclick=function(){alert("你好!")};
document.getElementsByTagName ("test")[0].οnclick=function(){alert("你好")};
document.body.οnclick=function(){alert("first");};
document.body.οncοpy=function(){alert("coped")};
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script>
window.onload = function(){ //原生js的预加载
document.body.οncοpy=function(){alert("coped");}
}
</script>
</head>
<body>
<div>积分客户端上看价格</div>
</body>
</html>
属性 | 当以下情况发生时,出现此事件 | |||
onabort | 图像加载被中断 | |||
onblur | 元素失去焦点 | |||
onchange | 用户改变域的内容 | |||
onclick | 鼠标点击某个对象 | |||
ondblclick | 鼠标双击某个对象 | |||
onerror | 当加载文档或图像时发生某个错误 | |||
onfocus | 元素获得焦点 | |||
onkeydown | 某个键盘的键被按下 | |||
onkeypress | 某个键盘的键被按下或按住 | |||
onkeyup | 某个键盘的键被松开 | |||
onload | 某个页面或图像被完成加载 | |||
onmousedown | 某个鼠标按键被按下 | |||
onmousemove | 鼠标被移动 | |||
onmouseout | 鼠标从某元素移开 | |||
onmouseover | 鼠标被移到某元素之上 | |||
onmouseup | 某个鼠标按键被松开 | |||
onreset | 重置按钮被点击 | |||
onresize | 窗口或框架被调整尺寸 | |||
onselect | 文本被选定 | |||
onsubmit | 提交按钮被点击 | |||
onunload | 用户退出页面 |
2、通过HTML属性进行事件处理函数的绑定
<a href="#" οnclick="f()">
二、jquery中事件的绑定
$("button").click(function(){$("p").slideToggle();});
//点击button,显示或隐藏button
但是如果这段js放在<header></header>之间,就得预加载,如下:
$(function(){ //jquery框架下的预加载
$("button").click(function(){ $("p").slideToggle();});
});
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="jquery.js"></script>
<script>
$(function(){//jquery下的预加载
$("body").bind({ //bind或者on都能达到同样效果
copy:function(){
alert("copyed!");
},
});
$("#key").click(function(){
alert("clicked!");
});
});
</script>
</head>
<body>
积分客户端上看
<button id="key">价格</button>
</body>
</html>
向匹配元素附加一个或更多事件处理器 | |
触发、或将函数绑定到指定元素的 blur 事件 | |
触发、或将函数绑定到指定元素的 change 事件 | |
触发、或将函数绑定到指定元素的 click 事件 | |
触发、或将函数绑定到指定元素的 double click 事件 | |
向匹配元素的当前或未来的子元素附加一个或多个事件处理器 | |
移除所有通过 live() 函数添加的事件处理程序。 | |
触发、或将函数绑定到指定元素的 error 事件 | |
返回 event 对象上是否调用了 event.preventDefault()。 | |
相对于文档左边缘的鼠标位置。 | |
相对于文档上边缘的鼠标位置。 | |
阻止事件的默认动作。 | |
包含由被指定事件触发的事件处理器返回的最后一个值。 | |
触发该事件的 DOM 元素。 | |
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 | |
描述事件的类型。 | |
指示按了哪个键或按钮。 | |
触发、或将函数绑定到指定元素的 focus 事件 | |
触发、或将函数绑定到指定元素的 key down 事件 | |
触发、或将函数绑定到指定元素的 key press 事件 | |
触发、或将函数绑定到指定元素的 key up 事件 | |
为当前或未来的匹配元素添加一个或多个事件处理器 | |
触发、或将函数绑定到指定元素的 load 事件 | |
触发、或将函数绑定到指定元素的 mouse down 事件 | |
触发、或将函数绑定到指定元素的 mouse enter 事件 | |
触发、或将函数绑定到指定元素的 mouse leave 事件 | |
触发、或将函数绑定到指定元素的 mouse move 事件 | |
触发、或将函数绑定到指定元素的 mouse out 事件 | |
触发、或将函数绑定到指定元素的 mouse over 事件 | |
触发、或将函数绑定到指定元素的 mouse up 事件 | |
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 | |
文档就绪事件(当 HTML 文档就绪可用时) | |
触发、或将函数绑定到指定元素的 resize 事件 | |
触发、或将函数绑定到指定元素的 scroll 事件 | |
触发、或将函数绑定到指定元素的 select 事件 | |
触发、或将函数绑定到指定元素的 submit 事件 | |
绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 | |
所有匹配元素的指定事件 | |
第一个被匹配元素的指定事件 | |
从匹配元素移除一个被添加的事件处理器 | |
从匹配元素移除一个被添加的事件处理器,现在或将来 | |
触发、或将函数绑定到指定元素的 unload 事件 |
补充:jquery的选择器
语法 | 描述 |
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |