JavaScript3：事件
程序员文章站
2022-04-05 11:15:12
...
事件
//键盘事件
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//onkeydown 按键被按下
//onkeyup 按键松开
//onkeypress 按下并松开
function show(e) {
//在事件对象里面会有属性
var code = e.keyCode; //获取键码
if (code == 119) {
console.log("前进")
} else if (code == 97) {
console.log("往左")
}else if (code ==13) {
var content=document.getElementById("s").value;
console.log("搜索："+content)
} else {
console.log("其他")
}
//alert("按下并松开了"+code);
}
</script>
</head>
<body>
<!-- event 事件对象，由浏览器创建 -->
<input type="text" id="s" value="" onkeypress="show(event)" />
</body>
</html>
//鼠标事件
//onmousedown 按下
//onmouseup 松开
//onmouseover 放上
//onmouseout 离开
//onmousemove 移动
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<!-- this 表示绑定了该事件的元素对象 -->
<div id="d1" onmousedown="anxia(event,this)" onmouseup="songkai(this)"
onmouseover="yishang(this)" onmouseout="yichu(this)" onmousemove="show()">
</div>
</body>
</html>
<script type="text/javascript">
function anxia(e,obj) {
//var obj= document.getElementById("d1");
obj.style.background = "yellow";
//可以根据事件对象里面的属性，来获取用户按得是鼠标的哪个键 0 1 2
var code=e.button;
if(code==0){
alert("左键")
}else if(code==1){
alert("中键")
}else{
alert("右键")
}
function songkai(obj) {
obj.style.background = "pink";
}
function yishang(obj) {
obj.style.background = "blue";
}
function yichu(obj) {
obj.style.background = "green";
}
var i=1;
function show(){
console.log(i++);
}
</script>
//页面加载完成事件
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//onload 页面加载完成的事件
window.onload = function() {
var btn = document.getElementsByTagName("button")[0];
alert(btn);
}
</script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
</html>
//表单事件
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="" value="asdfasdfasdfsf" onselect="test()" />
<select name="shuiguo" onchange="show()">
<option value="">选择水果</option>
<option value="pg">苹果</option>
<option value="pt">葡萄</option>
<option value="xj">香蕉</option>
<option value="tz">桃子</option>
</select>
<input type="radio" name="sex" id="" value="1" onchange="show1()"/>男
<input type="radio" name="sex" id="" value="0" onchange="show2()"/>女
<input type="checkbox" name="hobby" id="" value="yy" onchange="show3()"/>音乐
</body>
</html>
<script type="text/javascript">
function show(){
alert("你选择了一项下拉项")
}
function show1(){
alert("你选择了一项")
}
function show2(){
alert("你选择了一项")
}
function show3(){
alert("你选择了一项复选框")
}
function test(){
alert("选中了文本")
}
</script>
//事件对象中的属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
margin-top: 100px;
height: 200px;
width: 200px;
background: yellow;
}
</style>
</head>
<body>
<!-- event 事件对象。 -->z
<button type="button" id="btn" onclick="show(event,this)">一个按钮</button>
<div id="wai" onclick="test(event)">
<button type="button">里面的按钮</button>
</div>
</body>
</html>
<script type="text/javascript">
function show(e,obj) {
//事件对象中的属性：type 获取事件类型
//currentTarget 返回其事件监听器触发该事件的元素。
//target 返回触发此事件的元素（事件的目标节点）。
//alert(e.type);
//document.getElementById("btn").style.background="red";
//obj.style.background="red";
//从事件对象中能够获取绑定了事件的元素对象。
//e.target.style.background="red";
e.currentTarget.style.background="red";
}
function test(e){
// 事件对象中 两个属性的区别： target 和 currentTarget
//target 获取的是触发了该事件的元素。
//currentTarget 获取的是绑定了该事件的元素对象。
var obj=e.currentTarget;
alert(obj);
}
</script>
//事件冒泡
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#one{
width: 300px;
height: 300px;
background: yellow;
}
#two{
width: 200px;
height: 200px;
background: red;
}
#three{
width: 100px;
height: 100px;
background:green;
}
</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>
</body>
</html>
<script type="text/javascript">
function show1(e){
//stopPropagation() 阻止事件的冒泡行为
e.stopPropagation();
alert(11111)
}
function show2(e){
e.stopPropagation();
alert(22222)
}
function show3(e){
e.stopPropagation();
alert(3333)
}
</script>
//阻止元素的默认行为
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//a 标签有个默认行为就是 跳转页面
<a href="http://www.baidu.com">进入百度</a>
//a 我们只想让a标签可以点击，但是不跳页面
<a href="#">进入百度</a>
//a 我们只想让a标签可以点击，但是不跳页面
<a href="javascript:void(0)">进入百度</a>
//a 我们只想让a标签可以点击,可以调用一个函数，但是不跳页面
<a href="javascript:void(show())">进入百度</a>
//通过事件对象 来阻止元素默认跳转页面的行为
<a href="http://www.baidu.com" onclick="show2(event)">进入百度</a>
<form action="123.html" method="post" onsubmit="tijiao(event)">
<input type="text" id="" name="username" value="" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
function show() {
alert("弹了");
}
function show2(e) {
//事件对象中，有方法可以阻止元素的默认行为
//preventDefault()阻止元素的默认行为
e.preventDefault();
alert("弹了222");
}
function tijiao(e){
e.preventDefault(); //阻止表单同步提交的行为
alert("提交表单，我要异步提交");
}
</script>
//节点的操作
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><!-- 注释 -->
<div id="d1">
<button type="button">一个按钮</button>
</div>
</body>
<script type="text/javascript">
//节点：包含，文本 标签 注释 都可以看做节点，节点之间有兄弟关系，父子关系
//获取页面中所有的标签节点。
var nodes = document.all;
// for(let i=0;i<nodes.length;i++){
// alert(nodes[i]);
// }
var obj = document.body.firstChild.nextSibling.nextSibling.firstChild.nextSibling;
obj.style.background = "red";
alert(obj);
alert(obj.innerText);
alert(obj.nodeType);
var text=obj.firstChild;
alert(text);
alert(text.nodeValue);
</script>
</html>
//节点的操作忽略空文本和注释
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--注释 -->
<div id="">
<div id="">
<button type="button">一个按钮</button>
</div>
</div>
<h1>asdfasdf</h1>
</body>
<script type="text/javascript">
var obj=document.body.firstElementChild.firstElementChild.firstElementChild;
alert(obj);
var h=document.body.firstElementChild.nextElementSibling;
alert(h);
h.style.color="red";
</script>
</html>
//设置元素的css样式
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1" align="center">
abc
</div>
</body>
</html>
<script type="text/javascript">
var myDiv = document.getElementById("d1");
//2.调用style属性来设置
//元素对象.style.css属性名="值"
/* myDiv.style.height = "200px";
myDiv.style.width = "200px";
myDiv.style.background = "yellow";
//如果CSS属性 有 - 横杠 那就把横杠去掉，把横杆后面的第一个字母变大写 例如: background-image 变成 backgroundImage
myDiv.style.backgroundImage = "url(img/girl1.jpg)";
myDiv.style.backgroundSize = "100% 100%"; */
//元素对象.style.cssText="css内联样式"
myDiv.style.cssText="height: 200px;width: 200px;background-color: aqua;"
//var v=myDiv.align;
//alert(v);
myDiv.align="left";
</script>
推荐阅读