利用DOM节点找对象和直接在标签属性中调函数传值this的书写区别
同样的功能,不同的书写格式。
1.个人觉得比较繁琐的写法,但是比较常见,特别是在大项目的时候常用的就是这种方法:
<div id="mouse" onmouseover="mOver()" onmouseout="mOut()" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(){
document.getElementById("mouse").innerHTML="Thank You"
}
function mOut(){
document.getElementById("mouse").innerHTML="Mouse Over Me"
}
</script>
2.这个中法比较简单,而且可以少些不少代码:
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
利用DOM节点找对象和直接在标签属性中调函数传值this的书写区别的更多相关文章
- DOM节点中获取文本易混淆的属性
DOM 节点中对于获取文本易混淆的属性,innerText, innerHTML, outerHTML, textContent, nodeValue. 一个实例: <!DOCTYPE html ...
- DOM节点的增删改查以及class属性的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- DOM中Event 对象如何使用
DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- javascript之DOM编程通过html元素的标签属性找节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点
Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
随机推荐
- docker 网络和/etc/docker/daemon.json文件详情
/etc/docker/daemon.json(没有就创建) [root@master ~]# /etc/docker/deamon.json { "registry-mirrors&quo ...
- AcWing 101. 最高的牛 (差分) 打卡
有 NN 头牛站成一行,被编队为1.2.3…N,每头牛的身高都为整数. 当且仅当两头牛中间的牛身高都比它们矮时,两头牛方可看到对方. 现在,我们只知道其中最高的牛是第 PP 头,它的身高是 HH ,剩 ...
- js设计模式——3.观察者模式
js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.sta ...
- CCC2018 最大战略储备
并查集基本处理即可. #include <cstdio> #include <iostream> #include <algorithm> #include < ...
- (转)短信vs.推送通知vs.电子邮件:app什么时候该用哪种方式来通知用户?
转:http://www.360doc.com/content/15/0811/00/19476362_490860835.shtml 现在,很多公司都关心的一个问题是:要提高用户互动,到底采取哪一种 ...
- (转)oracle group by 和order by的关系(在一起使用注意事项)
转:http://lzfhope.blog.163.com/blog/static/636399220092554045196/ 环境:oracle 10g单单group by 或者order by本 ...
- error LNK2019: 无法解析的外部符号 _PhInitializePhLib,该符号在函数 _EnumHandle 中被引用
编译时提示上面的错误,而确实应用了该函数的库文件,直接搜索lib文件内容,发送该函数的声明如下_PhInitializePhLib@0 说明函数的编译方式和库文件的编译方式不同,发现该工程的调用约定为 ...
- tomcat 相关异常
端口没有被占用却提示Several ports (8005, 8080, 8009) required by Tomcat??? 解决办法:1.运行cmd进入命令行界面:2.运行命令: netsh w ...
- java连连看小项目
/* *本人也是刚入门,希望各位多多指教 *该项目主要代码在于连线 *1.2个连线没有拐弯 *2.2个连线有一个拐弯 *3.2个连线有2个拐弯 *采用递归算法 */ package llk; impo ...
- cesium中divPoint展示数据
cesium中divPoint展示数据 在用点击面获取位置信息的时候,会弹出一个divPoint框,用来展示这个面的属性信息:或者位置信息. 代码如下: var handlerClick = new ...