[#. JavaScript] event.stopPropagation(), event. preventDefault()의 차이

 

 

 

 

 

 

event.stopPropagation()

이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막는다

이벤트가 상위 엘리먼트에 전달되지 않게 막아준다

 

 

 

table row 클릭 시에 페이지를 이동하도록 click 이벤트를 적용해 놨고,

column에도 delete 아이콘 클릭 시에 click 이벤트를 적용해 놨다

e.stopPropagation() 적용 전에는 delete 아이콘을 클릭하면 column onClick => row onClick 순으로 둘다 진행된다

=> console에 test 출력 후 페이지 이동

 

 

import React from "react"
import { Table } from "antd"
import { DeleteOutlined } from "@ant-design/icons"

const TestPage = (props) => {
  const columns = [
    {
      title: "삭제",
      dataIndex: "id",
      key: "id",
      render: (id) => (
        <div>
          <DeleteOutlined onClick={(e) => onDelete(e, id)} />
        </div>
      )
    },
  ]

  const list = [
    {
      id: ""
    }
  ]

  const onDelete = (e) => {
    console.log("test")
    e.stopPropagation()
  }

  return (
    <div>
      <Table columns={columns} dataSource={list} rowKey={list => list.id} pagination={false}
        onRow={(record, rowIndex) => {
        return {
          onClick: () => {
            props.history.push(`/test/1`)
          },
        }
      }}
      />
    </div>
  )
}

export default TestPage

 

 

e.stopPropagation()을 적용하면 delete 아이콘 클릭 시 현재 이벤트만 실행되기 때문에

삭제 버튼에 적용된 column onClick 이벤트만 실행되는 것을 알 수 있다

 

 

 

 

 

event. preventDefault()

onClick() 이벤트 외에 a 태그 등의 이벤트를 막는다

 

column에도 delete 아이콘에 a 태그 적용, click 이벤트를 적용해 놨다

e.preventDefault() 적용 전에는 delete 아이콘을 클릭하면 onClick 이벤트, a 태그 둘다 진행된다

=> console에 test 출력 후 페이지 이동

 

import React from "react"
import { Table } from "antd"
import { DeleteOutlined } from "@ant-design/icons"
import { Link } from "react-router-dom"

const TestPage = (props) => {
  const columns = [
    {
      title: "삭제",
      dataIndex: "id",
      key: "id",
      render: (id) => (
        <div>
          <Link to="/test/1">
            <DeleteOutlined onClick={onDelete} />
          </Link>
        </div>
      )
    },
  ]

  const list = [
    {
      id: ""
    }
  ]

  const onDelete = (e) => {
    console.log("test")
    e.preventDefault()
  }

  return (
    <div>
      <Table columns={columns} dataSource={list} rowKey={list => list.id} pagination={false} />
    </div>
  )
}

export default TestPage

 

e.preventDefault()를 적용하면 delete 아이콘 클릭 시 a 태그 이벤트는 실행되지 않기 때문에 onClick 이벤트만 실행되는 것을 알 수 있다