目录
1.事件的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 {
height: 100px;
width: 150px;
background-color: aquamarine;
}
</style>
</head>
<body>
<!-- 绑定事件的方式1，直接在标签上绑定 -->
<button type="button" onclick="show('hello')">一个按钮</button>
<div id="d1">
点我呀
</div>
<input type="button" value="我的按钮" id="btn" />
</body>
<script type="text/javascript">
function show(msg) {
alert(msg)
}
//方式2 来绑定事件
var myDiv = document.getElementById("d1");
var hehe=function() {
alert("hehe")
}
//把处理函数，设置为 null 就可以解绑事件
//hehe=nul;
myDiv.onclick = hehe;
//方式3，来绑定事件
// 3. 通过 addEventListener() 方法 来添加事件
// 语法：document.getElementById("myBtn").addEventListener("click",事件处理函数);
var btn = document.getElementById("btn");
var test = function() {
alert("点击了");
};
btn.addEventListener("click", test)
//解绑事件
btn.removeEventListener('click',test);
</script>
</html>
2.事件的绑定（注意事项）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn1" type="button">按钮1111</button>
<button id="btn2" type="button">按钮22222</button>
</body>
<script type="text/javascript">
var btn1=document.getElementById("btn1");
btn1.onclick=function(){
alert("btn11111111111");
}
//多次绑定同一类型的事件，就会覆盖上一次的。
btn1.onclick=function(){
alert("btn11111111111555555555555555555555555555");
}
//使用 addEventListener() 这个方法来绑定多个同类型事件，不会覆盖
var btn2=document.getElementById("btn2");
btn2.addEventListener("click",function(){
alert("btn2222222222")
})
btn2.addEventListener("click",function(){
alert("btn222222222288888888888888888888")
})
</script>
</html>
3.失去焦点和获得焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名：<input type="text" name="username" onfocus="clearText()" id="" value="请输入用户名"/>
</body>
<script type="text/javascript">
function clearText(){
var ele=document.getElementsByName('username')[0];
ele.value="";
}
</script>
</html>
4.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- * 键盘事件：
* onkeydown 某个键盘按键被按下。
* onkeyup 某个键盘按键被松开。
* onkeypress 某个键盘按键被按下并松开。
通过事件对象event中的keyCode属性，可以获取键盘某个键的键码 其实就是ASCII码表中对按键的编码 e.keyCode -->
<!-- event 事件对象，单词不要写错 -->
<input onkeypress="show(event)" type="text" name="" id="" value="" />
</body>
<script type="text/javascript">
//w 往前 s 往后 a 往左 d 往右
function show(e) {
//事件对象的属性 可以获取按键的编码
var code=e.keyCode;
console.log("按键被按下了"+code);
}
/* function show2(e) {
console.log("按键抬起了");
} */
</script>
</html>
5.鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 100px;
background: red;
}
/* #d1:hover{
}
#d1:active{
} */
</style>
</head>
<body>
<!--test1(this) this表示绑定了该事件的元素
event,事件对象，名字不要写错
-->
<div id="d1" onmousemove="show(this)" onmouseover="test1(this)" onmouseout="test2(this)" onmousedown="test3(this,event)" onmouseup="test4(this)">
</div>
<script type="text/javascript">
function test1(ele){
ele.style.background="yellow";
}
function test2(ele){
ele.style.background="blue";
}
function test3(ele,e){
// e.which 获取鼠标按键的编号 1 左键 2滚轮 3右键
var num=e.which
//alert(e.which);
ele.style.background="pink";
}
function test4(ele){
ele.style.background="black";
}
var i=200;
function show(ele){
ele.style.height=(i+=2)+"px";
console.log(i);
}
</script>
</body>
</html>
6.表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#" method="get" onsubmit="return tijiao()" onreset="chongzhi()">
<input type="text" name="username" id="" value="" oninput="checkUsername()"/>
<span id="sp"></span>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
<script type="text/javascript">
function tijiao() {
alert("表单提交");
return checkUsername(); // 返回true 表单数据会提交给后台，false 不会提交
}
function chongzhi() {
alert("表单重置");
}
function checkUsername(){
console.log("边输入，边触发");
var regx=/^[a-z]{6,16}$/i;
var text=document.getElementsByName('username')[0].value.trim();
var flag=regx.test(text);
var sp=document.getElementById('sp');
if(flag){
sp.innerHTML='<b style="color: green;">用户名格式正确✔<b>'
}else{
sp.innerHTML='<b style="color: red;">用户名格式错误✘<b>'
}
return flag;
}
</script>
</html>
7.页面加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//等文档中的所有元素加载完成之后执行,注意绑在window对象上
window.onload = function() {
var btn = document.getElementById("btn");
alert(btn);
}
</script>
</head>
<body>
<button type="button" id="btn">一个按钮</button>
</body>
</html>
8.下拉框事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" id="" value="输入框中的文本内容" onselect="change()" />
<!-- onchange 当你选择下拉项会触发 -->
<select name="" onchange="select()">
<option value="">--请选择学历--</option>
<option value="">--小学--</option>
<option value="">--中学--</option>
<option value="">--大学--</option>
</select>
<script type="text/javascript">
function select() {
alert("你选择了")
}
function change(){
alert("你扩选了");
}
</script>
</body>
</html>
9.事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 直接传递事件对象 -->
<button type="button" onclick="show(event)" id="btn">一个按钮</button>
<button type="button" onclick="show2()">一个按钮</button>
</body>
<script type="text/javascript">
//event 事件对象，由浏览器创建，我们可以拿来使用
function show(e){
//e 你传递过来的事件对象
// keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）
//button 当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键
//type获取事件类型 click
//alert(e.type);
//document.getElementById('btn').style.background="red";
//获取绑定了该事件的元素
var ele=e.target;
//var ele=e.currentTarget;
ele.style.background="yellow";
}
//直接在函数里面获取
function show2(){
//event就是事件对象
var e=window.event;
alert(e);
}
</script>
</html>
10.currentTarget和target的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: gold;
}
</style>
</head>
<body>
<div id="wai" onclick="show(event)">
<button type="button" id="btn">一个按钮</button>
</div>
<script type="text/javascript">
function show(e){
//target获取的是触发了事件的那个元素。
//currentTarget 获取的是绑定了该事件的元素对象
var ele=e.currentTarget;
//alert(ele);
ele.style.background="red";
}
</script>
</body>
</html>
11.事件的冒泡现象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#one{
height: 400px;
width:400px;
background:red;
}
#two{
height: 300px;
width:300px;
background:blue;
}
#three{
height: 200px;
width:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="one" onclick="show1()">
1
<div id="two" onclick="show2()">
2
<div id="three" onclick="show3()">
3
</div>
</div>
</div>
<script type="text/javascript">
//事件冒泡，事件从内层元素，一次向外触发。
//如果你不想需要这种事件冒泡现象，那我们就得阻止事件冒泡行为
function show1(){
alert("1111111111111111")
}
function show2(){
alert("22222222222")
}
function show3(){
alert("3333333")
}
</script>
</body>
</html>
12.阻止事件冒泡的行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#one{
height: 400px;
width:400px;
background:red;
}
#two{
height: 300px;
width:300px;
background:blue;
}
#three{
height: 200px;
width:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="one" onclick="show1(event)">
1
<div id="two" onclick="show2(event)">
2
<div id="three" onclick="show3(event)">
3
</div>
</div>
</div>
<script type="text/javascript">
//事件冒泡，事件从内层元素，一次向外触发。
//如果你不想需要这种事件冒泡现象，那我们就得阻止事件冒泡行为
//我们可以通过，事件对象中的 stopPropagation() 方法来阻止冒泡行为
function show1(e){
alert("1111111111111111")
//阻止事件冒泡
e.stopPropagation();
}
function show2(e){
alert("22222222222")
e.stopPropagation();
}
function show3(e){
alert("3333333")
e.stopPropagation();
}
</script>
</body>
</html>
13.元素的默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- a 标签 跳转页面是一个默认行为 我只想让a标签，执行点击事件，但是不要跳页面-->
<a href="http://www.163.com" onclick="show(event)">一个连接</a>
<!-- 阻止a标签的默认行为，其他方式 -->
<a href="javascript:void(0)" onclick="show2()">一个连接</a>
<a href="javascript:;;" onclick="show2()">一个连接</a>
<form action="123.html" method="post" onsubmit="tijiao(event)">
<input type="submit" value="提交"/>
</form>
</body>
<script type="text/javascript">
function show(e){
alert("abc");
e.preventDefault(); //阻止元素的默认行为
}
function show2(){
alert("abc");
}
function tijiao(e){
e.preventDefault(); //阻止表单默认同步提交额行为
alert("异步提交表单");
}
</script>
</html>
14.事件捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#one{
height: 400px;
width:400px;
background:red;
}
#two{
height: 300px;
width:300px;
background:blue;
}
#three{
height: 200px;
width:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="one">
1
<div id="two">
2
<div id="three">
3
</div>
</div>
</div>
<script type="text/javascript">
//事件捕获，事件从外层，向内层依次触发
//如果你不想需要这种事件冒泡现象，那我们就得阻止事件冒泡行为
function show1(){
alert("1111111111111111")
}
function show2(){
alert("22222222222")
}
function show3(){
alert("3333333")
}
//addEventListener() 方法的参数3 false 默认值，表示冒泡， true 事件捕获。
document.getElementById("one").addEventListener('click',show1,true);
document.getElementById("two").addEventListener('click',show2,true);
document.getElementById("three").addEventListener('click',show3,true);
</script>
</body>
</html>
15.事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="myUL">
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
<li class="myli">这是一个个列表项</li>
</ul>
</body>
<script type="text/javascript">
/* var liArr=document.getElementsByClassName("myli");
for(let i=0;i<liArr.length;i++){
//直接给每一个 子元素绑定
liArr[i].addEventListener('click',function(){
alert("点击了");
})
} */
//事件委托，把所有子元素的事件，绑定给给父元素
document.getElementById("myUL").addEventListener('click',function(e){
//alert("点击了");
e.target.style.backgroundColor = 'red';
})
</script>
</html>
16.设置元素的自带属性以及设置元素的css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<button type="button" disabled="disabled">一个按钮</button>
<button type="button" id="btn" onclick="test2(this)">一个按钮2222222222</button>
<input type="radio" name="sex" id="" value="1" />男
<input type="radio" name="sex" id="" value="0" />女
</body>
<script type="text/javascript">
var btn=document.getElementById("btn");
//设置元素的自带属性
btn.disabled=false; //true 表示禁用，false表示不禁用
var arr=document.getElementsByName("sex");
//alert(arr.length);
for(let i=0;i<arr.length;i++){
arr[i].addEventListener("change",function(){
//this 当前绑定了该事件的元素
var v=this.checked;
alert(v);
})
}
function test(ele){
//使用js代码设置元素的CSS样式
//元素对象.style.css属性名=值
ele.style.width="100px"; //值是字符串类型
ele.style.height="40px";
//css属性如果有横杠拼接的，要注意，把横杠去掉，把横杠后面的第一个字母变大写
//例如： background-color 得变成 backgroundColor
ele.style.backgroundColor="red";
}
function test2(ele){
//使用js代码设置元素的CSS样式
//方式2： ele.style.cssText="css内联样式的写法"
ele.style.cssText="width:200px;height:100px;background-color:yellow";
}
</script>
</html>
17.开关案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/pic_bulboff.gif" onclick="kaiGuan(this)">
</body>
<script type="text/javascript">
var flag = true;
function kaiGuan(ele) {
if (flag) {
ele.src = "img/pic_bulbon.gif";
//开启功能
} else {
ele.src = "img/pic_bulboff.gif";
//关闭功能
}
flag = !flag; //修改标记
}
</script>
</html>
开关图片
18.排他思想
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script type="text/javascript">
var btns=document.getElementsByTagName("button");
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
//把所有元素的背景恢复成默认
clearColor();
this.style.backgroundColor="red";
}
}
function clearColor(){
for(let i=0;i<btns.length;i++){
btns[i].style.backgroundColor="";
}
}
</script>
</html>
19.图片跟随鼠标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<img src="img/yazi.gif" id="tp">
</body>
<script type="text/javascript">
//你要整个页面绑定事件，绑定 document 上
//标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
//或者 window.event 中获取事件对象
document.addEventListener('mousemove', function(e) {
// 2. page 鼠标在页面文档的x和y坐标
var x = e.pageX;
var y = e.pageY;
//获取图片对象
var img = document.getElementById("tp");
//设置图片的样式
img.style.left = x + "px";
img.style.top = y + "px";
})
</script>
</html>
20.定位到搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="search" name="" id="ss" value="" />
<button type="button" onclick="sousuo()">搜索</button>
<hr size="12000px">
</body>
<script type="text/javascript">
function sousuo() {
alert("搜索");
}
//当输入完搜索的内容，敲回收开始搜索
document.getElementById("ss").addEventListener('keydown', function(e) {
//alert(e.keyCode);
if (e.keyCode == 13) {
alert("开始搜索")
}
})
//给整个文档绑定按键抬起事件
document.addEventListener('keyup', function(e) {
//alert(e.keyCode);
//判断 按的是 s
if (e.keyCode == 83) {
//让输入框获取焦点 focus() 在文本域上设置焦点。
document.getElementById("ss").focus();
e.pageY = 0 + "px"; //让页面定位到顶部 pageY纵坐标
}
})
</script>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
