dom绑定事件操作
s7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#test{
background-color: red;
width:300px;
height:400px;
}
</style>
<body>
<div id="test">
sdsd
</div>
<script>
var mydiv=document.getElementById('test');
mydiv.onclick=function () {
console.log('wwwwwwwwwwwwww')
}
</script>
</body>
</html>
行为 样式相分离
S8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="AddEle1();" value="+">
<input type="button" onclick="AddEle2();" value="+">
<div id="i1">
<p><input type="text"></p>
<!--<hr/> 分隔线标签-->
</div>
<script>
function AddEle1() {
//创建一个标签
//将标签添加到i1里面
var tag="<p><input type='text'/></p>";
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("afterEnd",tag);
}
function AddEle2() {
//创建一个标签
//将标签添加到i1里面
var tag=document.createElement('input'); //创建一个input标签
tag.setAttribute('type','text')
tag.style.fontSize="16px";
tag.style.color='red';
var p=document.createElement('p'); //创建p标签
p.appendChild(tag)
document.getElementById('i1').appendChild(p) //添加p标签
}
</script>
</body>
</html>
</body>
</html>
S9.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id='f1' action="http://www.baidu.com">
<input type="text">
<input type="submit" value="提交">
<a onclick="submitForm();">提交1</a>
</form>
<script>
function submitForm() {
document.getElementById('f1').submit();
alert(123);
var v=confirm('确定?');
console.log(v)
}
var obj=setInterval(function(){
console.log(1);
},1000)
clearInterval(obj);
</script>
</body>
</html>
提交表单
任何标签通过DOM都可以提交表单
document.getElementById('f1').submit();
alert(); 弹窗
confirm('确定?') 确认框 确认为true 取消为false
console.log(v) console口打印
location.href 获取当前url
location.href="http://www.baidu.com" 设置当前url 用于做重定向 跳转
location.href=location.href 刷新
location.reload(); 刷新
var obj=setInterval(function(){},5000) 定时器 5000毫秒执行一次函数
clearInterval(obj);清除定时器
setTimeout 定时器只执行一次
obj= setTimeout(function (){},5000)
清除定时器
claerTimeout(obj);
S10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="status"></div>
<input type="button" value="删除" onclick="deleteEle(); "/>
<script>
function deleteEle() {
document.getElementById('status').innerText="已经删除";
obj= setTimeout(function () {
document.getElementById('status').innerText='';
},5000)
clearTimeout(obj)
}
</script>
</body>
</html>
document.getElementById('status').innerText="已经删除"; 重新添加标签内容
S11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
function t1(n) {
var mytrs=document.getElementsByTagName('tr')[n];
mytrs.style.backgroundColor='red';
}
function t2(n) {
var mytrs=document.getElementsByTagName('tr')[n];
mytrs.style.backgroundColor='';
}
</script>
</body>
</html>
dom0的方式
绑定事件的两种方式:
a.直接标签绑定 onclick='' onfocus=''
b.先获取dom对象，然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
this 当前触发事件的标签
a.第一种绑定方式
<input id="i1" type="button" onclick="clickon(this)">
function clickon(self){
//self 代指当前点击的标签
}
b.第二种绑定方式
<input id="i1" type="button" >
document.getElementById('xxx').onclick=function(){
//this 代指当前点击的标签
}
c.第三种绑定方式
var mycontent=document.getElementById('i1');
mymain.addEventListener('click',function(){console.log('aaaaa')},false);
mymain.addEventListener('click',function(){console.log('bbbbb')},false);
作用域示例
var mytrs=document.getElementsByTagName('tr');
var len=mytrs.length;
for(var i=0;i<len;i++){
mytrs[i].onmouseover=function () {
this.style.backgroundColor="red";
}
mytrs[i].onmouseout=function () {
this.style.backgroundColor="";
}
S12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
var mytrs=document.getElementsByTagName('tr');
var len=mytrs.length;
for(var i=0;i<len;i++){
mytrs[i].onmouseover=function () {
this.style.backgroundColor="red";
}
mytrs[i].onmouseout=function () {
this.style.backgroundColor="";
}
}
</script>
</body>
</html>
dom1的方式
this 光标指向那个tr就指向那个tr
S12-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px;"></div>
<div style="width: 300px;">
<div class="item">
<div class="header" onclick="ChangeMenu(this);">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this);">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this);" >菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this);" >菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div>
<script>
function ChangeMenu(ths) {
var current_header=ths;
var item_list=current_header.parentElement.parentElement.children;
for (var i=0;i<item_list.length;i++){
var current_item=item_list[i];
current_item.children[1].classList.add('hide');
}
current_header.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html></title>
</head>
<body>
</body>
</html>
S12-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#test{
background-color: red;
width:300px;
height:400px;
}
</style>
<body>
<div id="test">
sdsd
</div>
<script>
var mydiv=document.getElementById('test');
mydiv.addEventListener('click', function(){console.log('aaaaa')},false);
mydiv.addEventListener('click', function(){console.log('bbbbb')},false);
</script>
</body>
</html>
dom2绑定方法
S13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#main{
background-color: red;
width: 300px;
height:400px;
}
#content{
background-color: pink;
width: 150px;
height:200px;
}
</style>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain=document.getElementById('main');
var mycontent=document.getElementById('content');
mymain.addEventListener('click',function(){console.log('main')},false);
mycontent.addEventListener('click',function(){console.log('content')},false); //冒泡 底下的先出来 true的模式刚好相反
</script>
</body>
</html>
S14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function t1(age) { //age 先找到函数声明表达式 function age()
console.log(age); //function age()
var age=27;
console.log(age); //27
function age() {}; //没有调用，通过
console.log(age); // 27 没有改变
}
t1(3);
</script>
</body>
</html>
active object ====>> AO 活动对象
1.形式参数
2.局部变量
3.函数声明表达式
1.形式参数
AO.age=undefined
AO.age=3
2.局部变量
AO.age=undefined
3.函数声明表达式 优先级最高
AO.age=function()
dom绑定事件操作的更多相关文章
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- 10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...
- 前端 ----关于DOM的事件操作
关于DOM的事件操作 一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...
- python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)
昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...
- 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
- JavaScript Dom 绑定事件
JavaScript Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...
- 关于DOM的事件操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...
- 10-关于DOM的事件操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...
- js --- 关于DOM的事件操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...
- js中 关于DOM的事件操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...
随机推荐
- 自助式BI：灵活应变的商业智能
在这个信息爆炸的时代,商业智能(BI)已经成为企业决策的必备工具.无论是哪个行业,哪个规模的企业,似乎都无法忽视这一强大工具的存在.然而,传统的BI模式往往存在着一些限制,使得企业无法灵活地应对各种业 ...
- Flink学习（十七） Emitting to Side Outputs（侧输出）
我们在生产实践中经常会遇到这样的场景,需把输入源按照需要进行拆分,比如我期望把订单流按照金额大小进行拆分,或者把用户访问日志按照访问者的地理位置进行拆分等.面对这样的需求该如何操作呢? 大部分的Dat ...
- 跨平台Windows和Linux（银河麒麟）操作系统OCR识别应用
1 运行效果 代码下载链接: https://pan.baidu.com/s/1NUfLTjk6kzXJKsaH7yo4qA?pwd=rk5c 提取码: rk5c. 在银河麒麟桌面操作系统V10(SP ...
- [解决方案][docker] Http: server gave HTTP response to HTTPS client
前言 用centos运行docker不支持http,需要在daemon.json 里面配置一下 目录 没有daemon.json 需要添加这个文件 在daemon.json 增添配置 重启即可 一.l ...
- Avalanche公链深度解析：创新共识、亚秒级最终性与生态竞争力
摘要:Avalanche定位为一个高性能.可扩展的Layer 1区块链平台,但它并不是一个新公链,其主网于2020年9月21日正式上线,有Ava Labs开发.Ava Labs成立于2018年,总部位 ...
- Laravel11 从0开发 Swoole-Reverb 扩展包（一） - 扩展包开发
前言 大家好呀,我是yangyang.好久没更新了,最近新项目在使用laravel11(截止目前发文,laravel12也发布了)做开发,自己也是利用有些空闲时间做些除开业务以外的深入学习,因此也就萌 ...
- iterm2配置ssh自动登录
iterm2 ssh 演示 cmd + o 打开服务器列表,方向键选择要登录的机器,回车,提示输入密码: option + cmd + f 打开密码管理器,方向键选择密码,回车,即可登录:(这一步通过 ...
- JAVA调用Python脚本执行
SpringBoot-web环境 <dependency> <groupId>org.springframework.boot</groupId> <arti ...
- weblogic日志查看
都是使用tail -f catalina.out命令来查看的,不要太顺手: 今天登陆到公司另外一个Team 的服务器上,发现装的是weblogic,手痒想看看weblogic怎么看日志,找了老半天,才 ...
- JDK7-日历类--java进阶day07
1.Calendar类 用于获取或者修改时间,之前学的Date类,获取和修改时间的方法已经过时 2.Calendar对象的创建 Calendar类里面有很多抽象方法,如果创建对象就要全部重写,所以不能 ...