利用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双向数据绑定 ...
随机推荐
- HTTP协议的消息头:Content-Type和Accept的作用 转载https://www.cnblogs.com/lexiaofei/p/7289436.html
一.背景知识 1.概述 Http报头分为通用报头,请求报头,响应报头和实体报头. 请求方的http报头结构:通用报头|请求报头|实体报头 响应方的http报头结构:通用报头|响应报头|实体报头 Acc ...
- 拾遗:使用 systemd-journald 管理 Docker 容器日志
在 docker.service 文件中的 ExecStart 字段中,添加(或:docker run --log-driver=journald): --log-driver=journald \ ...
- Centos光盘ISO安装过程再理解
ISO启动时的基本流程 vmlinuz -> 加载initrd.img -> 加载内核基本驱动 -> 挂载光盘至/run/install/repo -> 启动anaconda ...
- Laravel/php 一些调试技巧
1. 模型属性不知道哪里修改? 直接覆盖模型的 setAttribute 方法,监测到某一个属性改动的时候,抛一个异常就可以看到堆栈了 use Illuminate\Database\Eloquent ...
- Spring事务详细解释
前言 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为.事务传播行为是Spring框架独有的事务增强特性,他不属于的事务实际提供方数据库行为.这是Spring ...
- 远程服务器安装nginx
肯定有前端的小伙伴在腾讯云或者阿里云上购买了服务器,却不知道怎么访问使用它,那我们就一起来安装学习下? xshell 登录服务器,输入公网ip和密码登录 ls 查看目录,which nginx ,查看 ...
- 函数隐藏参数 — this
解析器在调用函数每次都会向函数内部传递一个隐含的参数,这个隐含的参数就是this this指向的是一个对象,这个对象我们成为函数执行的上下文对象 根据函数的调用方式不用,this会指向不同的对象: 1 ...
- 深度探索C++对象模型读书笔记-第七章站在对象模型的尖端
Template 模板是在编译时期而非执行时期被计算的.因此其不会带来效率的降低. 1: const Point<float> &ref = 0; 该语句会实例化一个Point的f ...
- 单个机器部署redis集群模式(一键部署脚本)
一.检查机器是否安装gcc.unzip.wget 二.部署模式 #模式1: 将所有主从节点以及sentinel节点部署在同一台机器上 #模式2: 将一个数据节点和一个sentinel节点部署在一台机器 ...
- tomcat 端口被占用 项目端口号被占用怎么解决
1.Win+R 打开运行 ,输入cmd 打开命令行窗口 . 2.假设要查询端口被占用情况,在命令行下输入:netstat -aon|findstr "8883" 3.得到进程 ...