document事件及例子

最新推荐文章于 2023-12-20 19:50:38 发布
最新推荐文章于 2023-12-20 19:50:38 发布
阅读量337 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/NCL--/p/7056709.html
版权

一、关于鼠标事件：onclick：鼠标单击触发

                  ondbclick:鼠标双击触发

                  onmouseover：鼠标移上触发

                  onmouseout：鼠标离开触发

                  onmousemove：鼠标移动触发

二、关于键盘事件：onkeydown：键盘按下瞬间触发

                  onkeyup：按键抬起触发

                  onkeypress：按键触发

三、关于表单事件：onfocus获得焦点时触发

                  onblur：失去焦点时触发

                  onchange：内容改变时触发在下拉列表中作为选中值变化触发

事件可以写在标签中也可写在js中 

eg：var a=document.getElementById("anniu");

a.οnclick=function(){

匿名函数

}；在js中不支持给多个元素加事件

this代表该元素本身

例子：注意：backgroundColor中的color首字母不大写，无法实现

<!--选中一个背景颜色变，其他不变-->
<div id="a">
<div class="item" οnclick="sel(this)"></div>
<div class="item" οnclick="sel(this)"></div>
<div class="item" οnclick="sel(this)"></div>
<div class="item" οnclick="sel(this)"></div>
<div class="item" οnclick="sel(this)"></div>
<div class="item" οnclick="sel(this)"></div>
<div class="item" οnclick="sel(this)"></div>
</div>
</body>
<script type="text/javascript">
function sel(a){
    var sy=document.getElementsByClassName("item");
    for(var i=0;i<sy.length;i++){
        sy[i].style.backgroundColor="blue";
        }
        a.style.backgroundColor="red";
    }
</script>

<style type="text/css">
*{ margin:0px auto;
padding:0px;}
#aa{
    width:280px;
    height:40px;
    border:1px solid #C33;
    margin-top:100px;
    line-height:40px;
    vertical-align:central;
    padding-left:20px;
    
    }
#bb{
    width:300px;
    height:200px;
    border:1px solid #C33;
    
    }
.list{
    width:280px;
    height:39px;
    border-bottom:1px solid #C33;
    line-height:40px;
    vertical-align:central;
    padding-left:20px;
    
    }
</style>
</head>

<body>
<div id="aa" ></div>
<div id="bb" style="display:none">
<div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)" >济南</div>
<div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">淄博</div>
<div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">青岛</div>
<div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">潍坊</div>
<div class="list" οnmοuseοver="xz(this)" οnclick="sel(this)">烟台</div>
</div>
</body>
<script type="text/javascript">
function xz(a){
    var sy=document.getElementsByClassName("list");
    for(var i=0;i<sy.length;i++){
        sy[i].style.backgroundColor="white";
        sy[i].style.color="black";
        }
    a.style.backgroundColor="blue";
    a.style.color="white";
    }
    var aa=document.getElementById("aa");
    aa.onclick=function (){
        var c=document.getElementById("bb");
        if(c.style.display=="none"){
            c.style.display="block";
            }else{c.style.display="block";
            }
        }
    function sel(a){
        document.getElementById("bb").style.display="none";
        document.getElementById("aa").innerText=a.innerText;
        }
</script>

转载于:https://www.cnblogs.com/NCL--/p/7056709.html

weixin_30263073
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript DOM总结（文档事件）
鹿蹊zz的博客
07-11 325
目录DOM文档事件1、事件概述2、窗口事件3、表单事件4、键盘事件5、鼠标事件6、媒体事件7、其他事件8、事件冒泡9、事件委派10、事件判定11、事件传播 HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。 由窗口触发该事件 (同样适用于 标签)： 案例： 表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)： 案例： 通过键...
事件绑定 DOM2级事件监听 鼠标键盘表单触摸拖拽拖放事件 框选可视窗口发生改变后的事件
mx0102的博客
01-18 508
事件绑定 DOM2级事件监听 鼠标键盘表单触摸拖拽拖放事件 框选可视窗口发生改变后的事件
Document常用事件
sjslln的博客
05-16 763
element event事件 常见复制、剪切、粘贴阻止事件 建议：用addEventListener绑定事件，不用element.onEvent <textarea rows="3" cols="80" id="editor" oncopy="console.log('复制成功!'); return false;" oncut="console.log('剪切被阻止!'); return false;" > 尝试剪切和复制该文本
8.document常用事件
a1498665771的博客
02-07 2638
document常用事件
document 常用事件
fenghoumilin的博客
01-20 4011
//onclick 是鼠标右键点击事件 document.getElementById("image01").onclick = function(){ alert("666"); }; //键盘按键松开 document.getElementById("checkcodeID").onkeyup //创建一个img对象，然后赋予它一些值 var img = docu
Document: DOMContentLoaded 事件（MDN社区）
黛琳ghz的博客，期待你的关注。
01-02 1220
当纯 HTML 被完全加载以及解析时，DOMContentLoaded事件会被触发，而不必等待样式表，图片或者子框架完成加载。
JavaScript中使用stopPropagation函数停止事件传播例子
10-25
在这个例子中，当用户点击按钮时，首先会触发按钮上的点击事件处理函数，然后如果没有调用`event.stopPropagation()`，事件会继续向上冒泡到body元素，触发body的点击事件处理函数。但是，如果我们调用了`event....
事件经典例子
09-10
事件经典例子涉及用户交互、系统状态改变以及程序内部逻辑的触发。下面将详细阐述事件处理的相关知识点。 首先，我们要理解什么是事件。事件是发生在系统或应用程序中的一种特定情况，它可以是一个用户操作（如点击...
C#例子代码 A0650_EF_Document
06-17
C#例子代码 A0650_EF_DocumentC#例子代码 A0650_EF_DocumentC#例子代码 A0650_EF_DocumentC#例子代码 A0650_EF_DocumentC#例子代码 A0650_EF_DocumentC#例子代码 A0650_EF_DocumentC#例子代码 A0650_EF_DocumentC#...
JS document对象简单用法完整示例
10-15
JavaScript中的`document`对象是浏览器提供的全局对象，用于访问和操作HTML文档的各个部分，包括元素、属性、事件等。本篇文章将详细讲解`document`对象的一些基础用法，包括直接和间接获取页面元素的方法。 1. **...
Document和Document.all区别分析
09-06
而在第二个例子中，`document.all.aa` 使用了 `Document.all` 集合，即使元素没有设置name属性，它也能通过ID找到元素。这是因为 `Document.all` 不仅考虑ID，还包括元素的name属性。 关于name属性的特殊性，如果...
document事件
11-23
自己整理的javascript document事件，可以当手册使用。需要的时候查一查。
08-事件和Document对象
最新发布
成长需要沉淀。
12-20 305
当我们点击一个页面中的按钮之后，我们希望之后能够进行登陆操作，或是执行一些JS代码来实现某些功能，那么这个时候，就需要用到事件。事件相当于一个通知，我们可以提前设定好事件发生时需要执行的内容，当事件发生时，就会执行我们预先设定好的JS代码。那么如何为事件添加一个动作呢？我们可以直接为一个元素添加对应事件的属性，比如oninput事件，我们可以直接在事件的值中编写js代码，但是注意，只能使用单引号，因为双引号用于囊括整个值。
jQuery 事件——关于Select选中
知行合一
10-30 4284
在管理一篇博文时，因博文的管理有一列叫：状态的列，该列有诸多状态，如：正常，待审核，删除等… 此时，若使用Select下拉列表进行状态选择，并在选中具体项值后，通过Ajax异步提交，在效果及体验上就能得到更大化的体验。 下拉列表例子如下<select id="status"> <option value="0" >待审核</option> <option value="1" >未
javascript事件列表解说(转载)
"小灰"的专栏
10-26 3929
javascript事件列表解说事件浏览器支持解说一般事件onclickIE3、N2 鼠标点击时触发此事件ondblclickIE4、N4 鼠标双击时触发此事件onmousedownIE4、N4 按下鼠标时触发此事件onmouseupIE4、N4 鼠标按下后松开鼠标时触发此事件onmouseov
【Vue3】给整个网页背景document添加单击click事件
【敦厚的曹操】的专栏
11-13 2200
【Vue3】给整个网页背景document添加单击click事件，解决下拉菜单隐藏问题
document 常用方法和事件
oEveryman的专栏
05-31 1058
属性/方法/事件 描述 onClick 当文档被点击时触发 onDblClick 当文档被双击时触发 onKeyDown 当按下任意键时触发。优先于onKeyPress事件触发器 onKeyPress 参见onKeyDown onKeyUp 当释放按下的键时触发 onMouseDown 当按下鼠标键时触发 onMouseUp 当释放鼠标键时触发 captureEve
Document.createEvent() 创建自定义事件
马雷
05-22 6532
document.createEvent用于创建事件，在DOM Level 2　的事件中就有HTMLEvents，MouseEvents，UIEvents事件类型。 应用举例： // 创建事件 var event = document.createEvent('Event'); // 定义事件名为'build'. event.initEvent('build', true, true); // 监听事件 elem.addEventListener('build', function (e) {
document对象的属性 举例子
06-09
好的，以下是一些常用document对象属性的例子： 1. 获取当前文档的标题： ```javascript console.log(document.title); ``` 2. 获取当前文档的完整URL： ```javascript console.log(document.URL); ``` 3. 获取当前文档的域名： ```javascript console.log(document.domain); ``` 4. 获取当前文档的<body>元素： ```javascript console.log(document.body); ``` 5. 获取当前文档的<head>元素： ```javascript console.log(document.head); ``` 6. 获取当前文档的<html>元素： ```javascript console.log(document.documentElement); ``` 7. 获取当前文档的Cookie： ```javascript console.log(document.cookie); ``` 8. 获取当前文档中所有的表单元素： ```javascript console.log(document.forms); ``` 9. 获取当前文档中所有的图像元素： ```javascript console.log(document.images); ``` 10. 获取当前文档中所有的链接元素： ```javascript console.log(document.links); ``` 11. 获取当前文档中所有的<script>元素： ```javascript console.log(document.scripts); ``` 12. 获取当前文档中所有的样式表元素： ```javascript console.log(document.styleSheets); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值