javascript---DOM---事件

最新推荐文章于 2022-09-08 17:07:07 发布

weixin_34376986

最新推荐文章于 2022-09-08 17:07:07 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Knowledge-is-infinite/p/10888054.html

版权

快捷键：(shijian)事件

<input type="button" value="弹窗" οnclick="alert('直接使用脚本执行')"/>

1，效率低下

2，HTML元素绑定不符合行为与结构分离的原则

====

事件绑定：
1，HTML直接事件绑定(效率低下，行为与结构不分离)
2，匿名函数btn.οnclick=function(){}
3，自定义函数btn.οnclick=isLock; isLock是函数，这里千万不能加()，如果加，那么页面加载就会执行该函数。

鼠标事件：
onload: 页面加载时触发
onclick:鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onfocus:获得焦点时触发
onblur:是去焦点时触发
onchange:域的内容改变时触发

onsubmit:表单确认按钮被点击时触发(相对于整个表单而言)
onmousedown:鼠标在元素上按下时触发
onmouseup:鼠标在元素上按下松开时触发
onmousemove:鼠标在元素上移动时触发
onresize:当浏览器窗口发生变化时触发
onscroll:当滚动条滚动时触发(对象可以是window,element)

window.onkeydown:键盘的键按下时触发
window.onkeyup:键盘的键按下松开时触发
window.onkeypress:键盘的键按下时触发

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML事件</title>
<style>
.lock{
width: 100px;
height: 30px;
line-height: 27px;
font-size: 16px;
text-align: center;
background: #00f;
color: #fff;
border-radius: 5px;
}
.unlock{
width: 100px;
height: 30px;
line-height: 27px;
font-size: 16px;
text-align: center;
background: #333;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body>

<input type="button" value="弹窗" οnclick="alert('直接使用脚本执行')"/>

<input id="btn" class="lock" type="button" value="锁定"/>
<script type="text/javascript">
/*function over(btn,color){
btn.style.backgroundColor=color;
}
function out(btn,color){
btn.style.backgroundColor=color;
}*/

//-----匿名函数事件-------
/*var btn=document.getElementById('btn');//获取btn对象
//这种方式btn.οnclick=function(){}; 叫做匿名函数
//点击按钮时要执行匿名函数里面的脚本内容，匿名函数中一定要使用this，代替事件绑定的对象。否则报错
//第一种解决方法：判断this.className的值
btn.οnclick=function(){
if (this.className=="unlock") {
this.value="锁定";//这里一定注意使用this代替btn,
this.className="lock";
}else{
this.value="解锁";
this.className="unlock"
}
}*/

//第二种使用匿名函数方法：根据this.value的值进行判断是否解锁
/*btn.οnclick=function(){
if (this.value=="解锁") {
this.value="锁定";//这里一定注意使用this代替btn,
this.className="lock";
}else{
this.value="解锁";
this.className="unlock"
}
}*/

//-----调用自定义函数事件-------
/* var btn=document.getElementById('btn');//获取btn对象
//这种是调用自定义函数
btn.οnclick=islock;//islock这是函数，不需要些后面小括号()，如果些了小括号，那么在网页加载时就立马会执行。千万别写小括号();
//点击按钮时执行islock()函数。
function islock(){
if (this.className=="unlock") {
this.value="锁定";//这里一定注意使用this代替btn,
this.className="lock";
}else{
this.value="解锁";
this.className="unlock"
}
}*/

</script>
</body>
</html>

=============
//onchange 事件一般适用于：select下拉列表 checkbox复选框 radio单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{width: height: 2000px;}
.wrap{padding: 60px;}
.left{float: left;}
.wrap:nth-child(1){display: none;}
#tip{margin-left:15px;color: red;}
#one{width: 300px;height:300px;background-color: #ff0;overflow: auto;}
</style>
<script>
/*window.οnlοad=function(){
var wrap=document.getElementById('wrap');
var phone=document.getElementById("phone");
var tip=document.getElementById("tip");
//没有输入时隐藏提示信息
wrap.children[1].style.display="none";
// wrap.firstElementChild.style.display="block";
phone.οnfοcus=function(){
tip.style.display="block";
}
phone.οnblur=function(){
//this.value.length返回的是长度，所以是number类型，判断的时候不要双引号：11
//isNaN(this.value)返回的是布尔值，所以值是false/true。千万别写成"false",这是字符串
if (this.value.length==11 && isNaN(this.value)==false) {
tip.innerHTML="显示对勾。";
}else{
tip.innerHTML="请输入有效手机号码";
}
}
}*/

//文档加载完成后执行以下匿名函数脚本。
/*window.οnlοad=function(){
var bgcolor=document.getElementById("bgcolor");//获取下拉列表对象
bgcolor.οnchange=function(){
// var color=this.value;//等于下面一句话
// 上下两句相等，下面表示：下拉列表bgcolor.options表示数组，
// bgcolor.selectedIndex 表示下拉列表bgcolor选中项的索引
// value表示选中项的值。
var color=bgcolor.options[bgcolor.selectedIndex].value;//等于
if (color=="") return//如果是空值，则不该变背景颜色，所以使用return阻止程序运行。一句话可以省略if结构语句。
//设置文档部分的背景样式的颜色
document.body.style.backgroundColor=color;
}
}*/

/**
* 鼠标在div中移动，按下，松开时触发的事件
* @return {[type]} [description]
*/
/* window.οnlοad=function(){
var one=document.getElementById("one");
//鼠标在div中按下触发事件
one.οnmοusedοwn=function(){
console.log("我是onmousedown事件");
}

//鼠标在div中按下后松开触发事件
one.οnmοuseup=function(){
console.log("我是onmouseup事件");
}

//鼠标在div中移动时触发事件
one.οnmοusemοve=function(){
console.log("我是onmousemove事件");
}
}*/

/**
* 浏览器窗口变化时触发的事件：window.onresize
* @return {[type]} [description]
*/
/*window.οnlοad=function(){
window.οnresize=function(){
console.log("我是浏览器窗口变化时触发的事件：wiondow.onresize");
}
}*/

/**
* 滚动条拖动事件window/ele.οnscrοll=function(){}
* @return {[type]} [description]
*/
window.οnlοad=function(){
var one=document.getElementById("one");
//我是div滚动条滚动事件
one.οnscrοll=function(){
console.log("我是div滚动条事件：one.οnscrοll=function(){}");
}

//我是浏览器滚动条滚动事件
/* window.οnscrοll=function(){
console.log("我是window滚动条事件：window.οnscrοll=function(){}");
}*/
}

</script>
</head>
<body>
<div id="wrap">
<div class="left"><input id="phone" type="text" placeholder="请输入手机号码"/></div>
<div class="left" id="tip">请输入有效的手机号码</div>
</div>
<div id="wrap1">
<select name="bgcolor" id="bgcolor">
<option value="" selected>请选择</option>
<option value="#f00">红色</option>
<option value="#0f0">绿色</option>
<option value="#00f">蓝色</option>
<option value="#ff0">黄色</option>
<option value="#ccc">灰色</option>
</select>
</div>
<form action="">
<input type="button" value="submit" id="btn">
</form>
<div id="one">
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
<h2>滚动条事件绑定</h2>
</div>
</body>
</html>

=================

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>mouse</title>
<style type="text/css">
#container > div > #allow{color: red;font-weight: bold;}
#cc{display: none;}
</style>
</head>
<body>
<div id="container">
<div>您还可以输入：<span id="allow">30</span>/30个字。<span id="cc"></span></div>
<textarea name="" id="text" cols="30" rows="3" ></textarea>
</div>
<script type="text/javascript">
window.οnlοad=function(){
/*var text=document.getElementById("text");//获取textarea文本域对象
var allow=document.getElementById("allow");//获取允许输入内容长度的对象
var total=30;//可输入字数为30个
//document.onkeydown 表示按键按下触发事件，这里的event是表示触发事件的对象
document.οnkeydοwn=function(event){
//返回键盘按下键对应的键码
//console.log(even.keyCode);
//获取textarea文本域对象内容的长度，这里不是可以使用text.innerHTML,因为这里使用的value进行取值的，innerHTML的取值时两个标签之间的内容，textarea的值是写在value中的。和<input type="text" value="我爱你"></input>一样。
len=text.value.length;
//可输入30-已经输入内容的长度=剩于可输入内容的长度
var count=total-len;
//允许输入的长度不能小于0，小于0时就显示允许输入的长度为0. 在上面的文本域中设置：maxlength="30"，是限制可输入最长的长度。
if (count<0) {
allow.innerHTML=0;
}else{
allow.innerHTML=count;
}
}*/

/*var allow=document.getElementById("allow");//可输入字数长度对象
var text=document.getElementById("text");//文本域对象
document.οnkeydοwn=function(){
var len=text.value.length;//获取已经输入内容的长度
var allowLen=30-len;//允许输入的长度。
if (allowLen<0) {//如果字数超过则要显示超过字数的提醒
allow.innerHTML=0;//如果字数超过30个，那么剩余可输入字数一直都是0.
var cc=document.getElementById("cc");//获得超过字数时的提醒对象
cc.style.display="inline-block";//字数超过，则显示cc对象提醒超过的字数
cc.innerHTML="您已经超出"+(allowLen*-1)+"个字。";//(allowLen*-1)负数乘以负一就是整数
}else{
allow.innerHTML=allowLen;//没有超过30字数时，显示剩余几个字数
}
}*/

//document.onkeydown 表示按键按下时触发,针对电脑所有统一按键都有效。
/*document.οnkeydοwn=function(event){//event是触发事件的对象。
console.log(event.keyCode);//这里指的是哪个按键，输出按键键码。
}*/

//document.onkeyup 表示按键按下松开时触发,针对电脑所有统一按键都有效。
/*document.οnkeyup=function(event){//event是触发事件的对象。
console.log(event.keyCode);//这里指的是哪个按键，输出按键键码。
}*/

//document.onkeypress 按下键盘按键时触发事件（只对字母和数字有效）
//onkeypress事件会在键盘按下时发生
//如果是在输入框中输入内容时，先弹出提示框再出现输入框中输入的文本
/*document.οnkeypress=function(event){//event是触发事件的对象。
alert("111");//按下任意一个按键立马跳出窗口
console.log(event.keyCode);//这里指的是哪个按键，输出按键键码。
}*/

}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10888054.html

weixin_34376986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript---DOM---事件

快捷键：(shijian)事件 <input type="button" value="弹窗" onclick="alert('直接使用脚本执行')"/>1，效率低下2，HTML元素绑定不符合行为与结构分离的原则====...
复制链接

扫一扫